【AmazeUI】底部导航条的改进

来源:互联网 发布:武汉mac口红专柜哪里有 编辑:程序博客网 时间:2024/05/03 21:10

AmazeUI的底部导航条已经在《【AmazeUI】底部导航栏与分享按钮》(点击打开链接)中介绍过了。

其实如果你的底部导航条中的导航过多,这个底部导航条还可以把后面的导航项隐藏起来。

然后提供一个上拉工具的“更多”


如果要实现这种效果,关键是在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>


0 0
原创粉丝点击