1、导航栏（菜单）
导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。
- 加载element模块
<script type="text/javascript"> layui.use('element',function(){ var element = layui.element; }) </script>
2、水平导航
这里的导航栏是由<ul></ul>、<li></li>、<dl></dl>等列表标签来实现的，由<ul></ul>、<li></li>来实现一级菜单，<dl></dl><dd></dd>来实现二级菜单。菜单中的列表项可按需求添加。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript">
layui.use('element',function(){
//加载模块
var element = layui.element;
})
</script>
</head>
<body>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item layui-this">
<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>
<li class="layui-nav-item"><a href="">个人信息</a></li>
<li class="layui-nav-item"><a href="">关于我们</a></li>
</ul>
</body>
</html>
测试效果：
测试效果.png
注：
- <ul>需要添加
class='layui-nav',才能显示出导航栏样式。class="layui-nav-item "：每一个菜单项（<li>）都要加上,不然菜单项不在一行上。class="layui-this": 默认的菜单项，即表示当前菜单项（菜单项下面有绿色的一条线）。class="layui-nav-child：写在二级菜单<dl>里面（<dl>要放在想要放二级菜单的<li></li>里面）。
3、垂直导航
垂直导航和水平导航基本一样，就是class不同，导致尺寸不一样。
- 侧边导航（整个）：
<ul class="layui-nav layui-nav-tree layui-nav-side">- 变化导航（根据菜单项个数改变长度）：
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript">
layui.use('element',function(){
//加载模块
var element = layui.element;
})
</script>
</head>
<body>
<!--侧边导航（整个侧边）:-->
<ul class="layui-nav layui-nav-tree layui-nav-side">
<!--根据菜单项改变长度的垂直导航 <ul class="layui-nav layui-nav-tree" lay-filter="test">-->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">信息管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">社区管理</a></dd>
<dd><a href="javascript:;">单元管理</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>
<li class="layui-nav-item"><a href="">关于我们</a></li>
</ul>
</body>
</html>
注：
- <li class="layui-nav-item layui-nav-itemed">中layui-nav-itemed代表加载页面时就将下拉框展开。
测试效果：
侧边导航.png
变化导航.png
4、面包屑导航
面包屑导航主要以<span></span>、<a></a>标签来实现，对<span>添加class="layui-breadcrumb"即可，还可以通过lay-separator="-"来改变分隔符。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript">
layui.use('element',function(){
//加载模块
var element = layui.element;
})
</script>
</head>
<body>
<h1>面包屑导航，默认以/为分隔符</h1>
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">信息管理</a>
<a href="">住户管理</a>
<a><cite>正文</cite></a>
</span>
<h1>面包屑导航，以-为分隔符 lay-separator="-"</h1>
<span class="layui-breadcrumb" lay-separator="-">
<a href="">首页</a>
<a href="">信息管理</a>
<a href="">单元管理</a>
<a><cite>正文</cite></a>
</span>
<h1>面包屑导航，以|为分隔符（可做小导航使用） lay-separator="|"</h1>
<span class="layui-breadcrumb" lay-separator="|">
<a href="">一单元</a>
<a href="">二单元</a>
<a href="">三单元</a>
<a href="">四单元</a>
<a href="">五单元</a>
<a href="">六单元</a>
</span>
</body>
</html>
测试效果：
面包屑.png
5、主题和其他元素
- 主题：可以对<ul>标签添加class="layui-bg-blue"等来改变主题颜色。
导航可选属性
导航可选属性.png
- 其他元素：
图标：<i class="layui-icon layui-icon-search"></i>
徽章：<span class="layui-badge">9</span>
......<span class="layui-breadcrumb " lay-separator="|"> <a href="">搜索<i class="layui-icon layui-icon-search"></i></a> <a href="">消息<span class="layui-badge">9</span></a> <a href="">主页<img src="layui/images/face/11.gif" class="layui-nav-img"></a> </span>
测试效果：
image.png
网友评论