「UI框架」Layui的页面元素之导航与面包屑

导航一般指页面引导性频道集合，经常以菜单的形式展示，多用于页面头部和侧边栏。layui提供了水平导航、垂直导航、侧边导航、面包屑导航。面包屑导航结构简单，并且支持自定义分隔符，默认为">"。使用layui的导航UI，需要加载 element模块。加载方式如下：

首先引入layui.css和layui.js文件，然后加载element模块，我这里习惯在head里加载css文件，在body结束前加载js文件，结构如下：

1、水平导航

水平导航是layui导航的基础导航，后两个垂直导航与侧边导航是在水平导航的基础上实现的。水平效果如下：

案例代码如下：

layui导航中通过设定layui-this来指向当前页面分类，与active类似。导航中除了文字之外，还可以加一些徽章或者图片，比如：

实例代码如下：

<li class="layui-nav-item">
<a href=""><img src="/avatar/58704a5e5843d.png" class="layui-nav-img">会员中心<span class="layui-badge">9</span></a>
</li>

关于徽章的用法比较简单，有小圆点、椭圆体、边框体三种风格，对应的样式分别为：

小圆点：通过 layui-badge-dot 类来定义，里面不能加文字，比如<span class="layui-badge-dot"></span>；

椭圆体：通过 layui-badge 类来定义，里面是可以加文字的，比如<span class="layui-badge">99</span>；

边框体：通过 layui-badge-rim 类来定义，也是可以加文字的，比如<span class="layui-badge-rim">Hot</span>

关于颜色风格，就没什么可介绍的了，自己根据UI设计的效果定义即可。

2、垂直导航

垂直导航与水平导航的HTML结构是一样的，直接追加class：layui-nav-tree 即可。

示例代码如下：

<ul class="layui-nav layui-nav-tree layui-main" lay-filter="">
 ……
</ul>

3、侧边导航

侧边导航也一样，不过需要追加的是：layui-nav-tree layui-nav-side两个类，后台管理中心经常用到类似效果。

示例代码如下：

<ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="">
……
</ul>

4、面包屑导航

面包屑导航，叫做路径导航也可以，经常在页面路径那使用，比如：首页> 前端开发 > UI框架 > layui

示例代码如下：

<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">前端开发</a>
<a href="">UI框架</a>
<a><cite>layui</cite></a>
</span>

另外，我们可以通过设置属性 lay-separator="|" 来自定义分隔符，比如可以用面包屑制作小导航：

代码如下：

<span class="layui-breadcrumb" lay-separator="|">
 <a href="">前端</a>
 <a href="">PHP</a>
 <a href="">Java</a>
 <a href="">Python</a>
 <a href="">.NET</a>
</span>

当然，分隔符是自定义的。

导航主题

另外，layui推荐了几个导航主题：

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）

垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

自己可以试试效果，个人感觉用到的时候会比较少，因为实际项目中往往会重写这些导航背景，甚至高度等样式。