利用layui来完成垂直和侧边导航的小案例

      利用layui来完成垂直和侧边导航的小案例

开发工具与关键技术：VS Layui
作者：沈金凤
年级：18级（4）班
撰写日期：2019年4月10日

Layui 是采用自身模块编写的前端UI的框架，有着原生的HTML/CSS/JS的书写和组织形式，初学者都可以从里面学到很多的东西，同样也可以拿来即用。还有就是它里面的方法极其简洁，却又不失饱满的内容，它体积轻盈，从核心代码到API的每一处细节都是经过精心的撰写出来的，是非常适合界面的快速的开发和使用。
layui导航一般是指页面引导性频道集合，大多数是以菜单的形式来呈现出来的，可以用于头部、垂直侧边和水平方面等等，是整个网页的画龙点睛般的存在。可以设置导航的目录有：水平导航、导航主题、垂直与侧边的导航、面包屑等等。
接下来就是我利用layui来完成垂直和侧边导航的案例,要完成这个案例首先得引用layui.css文件和 layui.all.js文件才可以，引用了这俩个文件之后就是写css的代码了，下面是在VS中编写的HTML：

从上图我们可以看出它是由一个大的ul标签来包裹着li标签，然后li标签中包裹a标签和dl标签，再然后a标签中包裹着span标签、dl标签中又包裹着dd标签，以此类推就可以完成了。
这两张图片中：第一张的第二行和第二张的最后一行就是layui.css文件和layui.all.js文件，还有就是layui.all.js必须放在HTML后面我曾试过把它放到layui.css文件下面结果是它没有引用成功。

下面是案例的效果图：

在浏览器中点击上图中的三角形按钮就会展现出隐藏在其中的内容如下图所示，再点击的时候就会恢复上图那样,而这样的效果是通过JS来完成的，JS中呢是通过display的属性的显示：display: block 和 隐藏：display: none 等其他方式来实现这样的一个效果。