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

YDUI Touch Docs 返回首页

NavBar

1、说明

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

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

2、结构

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

<header class="m-navbar">
<a href="#" class="navbar-item">
<!-- 左侧图标/文字 -->
</a>
<div class="navbar-center">
<!-- 中间内容 -->
</div>
<a href="#" class="navbar-item">
<!-- 右侧图标/文字 -->
</a>
</header>

2.2、集成返回箭头图标.back-ico和前进箭头图标.next-ico

3、常见样式(默认为非fixed定位)

3.1、添加图标和标题;

3.1.1、图标位于.navbar-item内,标题位于.navbar-center > .navbar-title内:

<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>
</header>

3.1.2、效果如下:

3.2、添加LOGO

3.2.1、在.navbar-center放置你的LOGO图片即可;

<header class="m-navbar demo-small-pitch">
<a href="#" class="navbar-item"><i class="back-ico"></i>返回</a>
<div class="navbar-center">
<img src="../img/logo.png" alt="">
</div>
<a href="#" class="navbar-item">前进<i class="next-ico"></i></a>
</header>

3.2.2、效果如下:

4、fixed定位导航

4.1、在.m-navbar上添加.navbar-fixed样式即可;

<header class="m-navbar navbar-fixed">
<a href="#" class="navbar-item">
<i class="back-ico"></i>
</a>
<div class="navbar-center">
<span class="navbar-title">NavBar</span>
</div>
</header>

5、专属定制

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

6、参与讨论

6.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。