导航

导航

开发工具与关键技术： VS  layui
作者：木林森   
撰写时间：2019年4月25日

导航指的是页面引导性频繁集合，在页面多以菜单的形式出现，可运用于页面的头部和侧边，在网上我们或多或少都会见过页面的导航，比如淘宝，天猫……
那么在页面它们是如何实现导航功能的呢？下面一起来探究一下
在刚学习前端页面布局时，我们经常会自己写导航部分，用到的都是Bootstrap4里面的面包屑导航，面包屑导航是一种基于网站层次信息的显示方式。就以博客为例，它可以显示发布的日期，标签和类别。它们表示当前页面在导航层次结构内的位置，是用户界面中的一种导航辅助。在Bootstrap4中面包屑导航简单的带有.breadcrumb class 的无序列表。分隔符会通过CSS（bootstrap.min.css）中的 ::before 和 content 来添加。
之前在学习Bootstrap4的面包屑导航觉得用它很方便，直到后来学习了layui导航之后，就得layui就更加方便了。但是在使用layui导航时需要注意的是：它需要借助element模块才可以使用。（在页面中许多元素需要去完成一些特殊效果处理，如导航菜单栏的小滑块，tab的切换，它们可以单独通过一些方法的调用去实现这些功能，但是这样就会让代码量变得非常多，这里可以运用element的组件来轻松实现这些功能，所以layui就很需要用到它。）
在页面中常用的导航有水平导航、垂直导航和侧边导航三种，接下将会通过它们的各自的例子去学习。
水平导航如例一：页面布局代码如图1，效果图如图2
图1
图2
从图二可以看出我们有三种颜色的效果图，这里值得我们注意的是，在layui的水平导航中它支持的背景主题有：layui-bg-cyan（藏青色）、layui-bg-molv（墨绿色）、layui-bg-bule（艳蓝色）；而垂直导航支持的只有：layui-bg-cyan（藏青色）。
这里只要对导航追加CSS背景类就可以让导航呈现出不同的主题色，追加的代码如下：

图3
layui导航中还有许多可选的属性，比如layui-shrink和lay-unselect
layui-shrink可选的值有两个，一是默认值什么都不填，此时它就不收缩兄弟菜单的子菜单，二是all：它会收缩全部兄弟菜单的子菜单。
lay-unselect：它无需填值，它的作用就是在你点击了导航菜单时，它不会出现选中效果，这样的话你很难区分到底是你网络卡还是根本就没有点击到，所以它在导航时很少会使用到。它们的写法如下: