AmazeUI 导航条的实现示例

<h1>导航菜单-横排文字式</h1> <style> /*这里是改写文字的颜色*/ .am-menu-default .am-menu-nav a { color:#222; } /*这里是改写背景的颜色*/ .am-menu-nav{ background:#f1f1f1; } </style> <div data-am-widget="menu" class="am-menu am-menu-default" > <a href="javascript: void(0)" class="am-menu-toggle a-in-menu"><i class="am-menu-toggle-icon am-icon-bars"></i></a> <!--表示每一个菜单都占3格，也就是在12格1行的布局中占据4格的位置--> <ul class="am-menu-nav am-avg-sm-3"> <!--表示这个项目带下拉菜单--> <li class="am-parent"> <a href="#">项目1</a> <ul class="am-menu-sub am-collapse am-avg-sm-4"> <li><a href="#">项目1-1</a></li> <li><a href="#">项目1-2</a></li> <li><a href="#">项目1-3</a></li> <li><a href="#">项目1-4</a></li> <li><a href="#">项目1-5</a></li> <li><a href="#">项目1-6</a></li> </ul> </li> <li><a href="#">项目2</a></li> <li><a href="#">项目3</a></li> <li><a href="#">项目4</a></li> <li class="am-parent"> <a href="#">项目5</a> <ul class="am-menu-sub am-collapse am-avg-sm-4"> <li><a href="#">项目5-1</a></li> <li><a href="#">项目5-2</a></li> <li><a href="#">项目5-3</a></li> <li><a href="#">项目5-4</a></li> <li><a href="#">项目5-5</a></li> <li><a href="#">项目5-6</a></li> </ul> </li> </ul> </div>

二、利用按钮组与下拉按钮

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!