嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

NavBar

1、说明

1.1、示例:http://m.ydui.org/html/navbar.html

1.2、移动端常见固定于顶部的导航条;

2、调用

只包含中间内容

若为 fixed定位 导航,则需在 .m-navbar 上添加 .navbar-fixed 即可。

<header class="m-navbar">
<div class="navbar-center">
<span class="navbar-title">NavBar</span>
</div>
</header>
添加左右箭头

NavBar分为左、中、右结构,中间部分为必选,左右可选。

<header class="m-navbar">
<a href="#" class="navbar-item">
<i class="back-ico"></i>
</a>
<div class="navbar-center">
<span class="navbar-title">NavBar</span>
</div>
<a href="#" class="navbar-item">
<i class="next-ico"></i>
</a>
</header>
中间放Logo

将图片放入 .navbar-center 元素内即可。

<header class="m-navbar">
<a href="#" class="navbar-item">
<i class="back-ico"></i>返回
</a>
<div class="navbar-center">
<img src="//static.ydcss.com/www/img/logo.png" >
</div>
<a href="#" class="navbar-item">
前进<i class="next-ico"></i>
</a>
</header>
放多个图标

NavBar同侧可放置多个图标。

<header class="m-navbar">
<a href="#" class="navbar-item">
<i class="icon-shopcart-outline"></i>
</a>
<div class="navbar-center">
<span class="navbar-title">什么鬼,这个标题怎么那么长啊</span>
</div>
<div class="navbar-item">
<a href="#">
<i class="icon-ucenter-outline"></i>
</a>
<a href="#">
<i class="icon-ucenter-outline"></i>
</a>
<a href="#">
<i class="icon-ucenter-outline"></i>
</a>
</div>
</header>

3、专属定制

3.1、顶部导航条的高度、字体字号、字体颜色、背景颜色等都可以通过这里定制;