导航栏:
1.layui-this:指向当前页面分类
2.layui-nav、layui-nav-tree、layui-nav-side:水平、垂直、侧边展示
3.layui-nav-item、layui-nav-itemed、layui-nav-child:节点、节点是否展开、子节点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>开始使用Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="/layui/css/layui.css"> </head> <body> <!-- 导航 --> <ul class="layui-nav" lay-filter=""> <li class="layui-nav-item"><a href="">最新活动</a></li> <li class="layui-nav-item layui-this"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> <li class="layui-nav-item"><a href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <!-- 二级菜单 --> <dd> <a href="">移动模块</a> </dd> <dd> <a href="">后台模版</a> </dd> <dd> <a href="">电商平台</a> </dd> </dl></li> <li class="layui-nav-item"><a href="">社区</a></li> </ul> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --> <li class="layui-nav-item layui-nav-itemed"><a href="javascript:;">默认展开</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">选项1</a> </dd> <dd> <a href="javascript:;">选项2</a> </dd> <dd> <a href="">跳转</a> </dd> </dl></li> <li class="layui-nav-item"><a href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <dd> <a href="">移动模块</a> </dd> <dd> <a href="">后台模版</a> </dd> <dd> <a href="">电商平台</a> </dd> </dl></li> <li class="layui-nav-item"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> </ul> <!-- 面包屑 --> <div class="layui-input-block"> <span class="layui-breadcrumb"> <a href="">首页</a> <a href="">国际新闻</a> <a href="">亚太地区</a> <a><cite>正文</cite></a> </span> </div> <div class="layui-input-block"> <span class="layui-breadcrumb" lay-separator="-"> <a href="">首页</a> <a href="">国际新闻</a> <a href="">亚太地区</a> <a><cite>正文</cite></a> </span> </div> <div class="layui-input-block"> <span class="layui-breadcrumb" lay-separator="|"> <a href="">娱乐</a> <a href="">八卦</a> <a href="">体育</a> <a href="">搞笑</a> <a href="">视频</a> <a href="">游戏</a> <a href="">综艺</a> </span> </div> <script src="../../layui/layui.js"></script> <script> //一般直接写在一个js文件中 layui.use('element', function(){ var element = layui.element(); }); </script> </body>