Layui导航
- 水平导航
页面效果：
1.这就是水平导航，我们在项目中经常看到，水平导航可应用于头部和侧边，多以菜单的形式呈现。
除了一般的文字导航，我们还内置了图片和徽章的支持，如：
下面的就是她们的代码：
对于上面的这两个水平导航，还有一个要注意的地方是他们都使用了—二级菜单
- 导航主题
接下来我们就来看一下，通过对导航追加CSS背景类，让导航呈现不同的主题色。
下面是这个导航主题的代码，其实就是在标签上追加css的背景。，
- 垂直/侧边导航
这是垂直导航的效果:
侧边导航就是在页面的最左或者最右边进行导航，页面样式大致和垂直导航效果一样，在这里就不放图片了，不过要注意的一点就是侧边导航是固定在侧边的，不会因为页面的滚动而变化。
水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：
1.垂直导航需要追加class：layui-nav-tree
2.侧边导航需要追加class：layui-nav-tree
layui-nav-side
- 导航可选属性
对导航元素结构设定可选属性，可让导航菜单项达到不同效果。目前支持的属性如下：
- 面包屑
面包屑导航在项目中使用的很广泛，代码简洁，样式清晰，很受欢迎。
首页/ 国际新闻/ 亚太地区/ 正文
你还可以通过设置属性 lay-separator="-" 来自定义分隔符。
如： 首页- 国际新闻- 亚太地区- 正文
当然，你还可以作为小导航来用，如：
娱乐| 八卦| 体育| 搞笑| 视频| 游戏| 综艺