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

YDUI Touch Docs 返回首页

NavBar

1、说明

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

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

2、调用

只包含中间内容
NavBar

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

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

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、顶部导航条的高度、字体字号、字体颜色、背景颜色等都可以通过这里定制；