layui导航栏案例

layui导航栏

首先引入css和js文件

黑框以ul标签为主题,样式为:layui-nav

框中每一项内容(一级菜单)以li标签包裹,class样式为:layui-nav-item

二级菜单以dl标签包裹,class样式为:layui-nav-child
二级菜单引入样式并不能显示出来,需要依赖element模块才可以

添加色彩及样式的导航栏

导航栏代码

<ul class="layui-nav layui-bg-green"><!--可以更换导航栏背景颜色为墨绿色-->
       <li class="layui-nav-item ">
           <a href="">控制台<span class="layui-badge">999</span></a>
       </li>
       <li class="layui-nav-item">
           <a href="">个人中心<span class="layui-badge-dot"></span></a>
       </li>
       <li class="layui-nav-item">
           <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
           <dl class="layui-nav-child">
               <dd><a href="javascript:;">修改信息</a></dd>
               <dd><a href="javascript:;">安全管理</a></dd>
               <dd><a href="javascript:;">退出</a></dd>
           </dl>
       </li>
   </ul>