【AmazeUI】底部导航条的改进
2015-06-19 16:40
411 查看
AmazeUI的底部导航条已经在《【AmazeUI】底部导航栏与分享按钮》(点击打开链接)中介绍过了。
其实如果你的底部导航条中的导航过多,这个底部导航条还可以把后面的导航项隐藏起来。
然后提供一个上拉工具的“更多”
如果要实现这种效果,关键是在ul节点的属性中加入am-cf am-avg-sm-3这两个属性,如果不加,无论你的屏幕多窄,它都不隐藏选项,如果加上了,当设备的屏幕过小,它会隐藏多余的项的。
其实如果你的底部导航条中的导航过多,这个底部导航条还可以把后面的导航项隐藏起来。
然后提供一个上拉工具的“更多”
如果要实现这种效果,关键是在ul节点的属性中加入am-cf am-avg-sm-3这两个属性,如果不加,无论你的屏幕多窄,它都不隐藏选项,如果加上了,当设备的屏幕过小,它会隐藏多余的项的。
<div class="am-navbar am-navbar-default" data-am-widget="navbar"> <ul class="am-navbar-nav am-cf am-avg-sm-3"><!--导航条是否隐藏多余项的关键参数--> <li> <a href="#"> <span class="am-icon-home"></span> <span class="am-navbar-label">首页</span> </a> </li> <li> <a href="#"> <span class="am-icon-user-md"></span> <span class="am-navbar-label">个人</span> </a> </li> <li> <a href="#"> <span class="am-icon-star"></span> <span class="am-navbar-label">收藏</span> </a> </li> <li> <a href="#"> <span class="am-icon-share-square-o"></span> <span class="am-navbar-label">分享</span> </a> </li> <li> <a href="#"> <span class="am-icon-comments-o"></span> <span class="am-navbar-label">聊天</span> </a> </li> </ul> </div>
相关文章推荐
- iOS UITextField 设置内边距
- GPUImge
- cPickle.load(f) ValueError: insecure string pickle错误问题
- GUI_Download的Codepage参数
- uva 1151 - Buy or Build poj 2784 Buy or Build(最小生成树)
- uwsgi invalid request block size: 的解决办法
- cannot set options after executing query
- UIView常用的一些方法小记之setNeedsDisplay和setNeedsLayout
- 压缩UI深度的代码实现
- ABP 初探 之基于EasyUI的CURD
- iOS开发UI篇—CAlayer层的属性
- Uva - 12166 - Equilibrium Mobile
- IOS UITableViewCell 分割左对齐处理
- Uva - 12166 - Equilibrium Mobile
- 自定义Activity标题栏(Title bar)和窗体显示状态操作(requestWindowFeature()的应用)
- Android安装应用失败UID 和 PID
- HTML Dom querySelector
- MonkyTalk学习-5-TestSuite
- moqui框架介绍
- 传智播客网页平面UI入驻武汉校区