div css垂直排版的导航菜单,垂直导航菜单特点鼠标点击展开子菜单内容，再点击隐藏子菜单内容，默认可以设置展开和折叠菜单。div css js实现特效导航菜单。
此导航菜单特点：
1、垂直排版，非横向水平排版导航（需要水平横向排版导航：水平排版网站导航布局）
2、可展开和折叠子菜单（带特效）
3、layui框架，兼容各大浏览器
4、直接拷贝代码即可使用
5、此垂直导航可实现垂直铺满整个页面的左侧
一、导航在线演示与对应HTMLCSS JS代码
以上为普通垂直点击展开与折叠导航菜单。
<ul class="layui-nav layui-nav-tree" lay-filter="test"> 说明，如果你想要垂直与整个网页左侧，只需要将<ul class="layui-nav layui-nav-tree" lay-filter="test">改为<ul class="layui-nav layui-nav-tree layui-nav-side">即可。 <script src="layui/layui.js"></script> 因基于layui所以，单独拷贝以上HTML代码JS代码还不能成功实现，还需要引入layui框架。 项目使用步骤： 1、普通垂直导航菜单 参考普通菜单： 免费下载地址： 2、铺满整个左侧垂直导航菜单 在线演示 免费打包下载： 以上下载资源为导航菜单所有包括layui框架文件完整包。
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd><a href="//www.html8.com.cn/">HTML8</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">点击展开</a>
<dl class="layui-nav-child">
<dd><a href="//www.html8.com.cn/">css</a></dd>
<dd><a href="//www.html8.com.cn/">div css</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>
</ul>
<script>
layui.use('element', function(){
var element = layui.element;
element.on('nav(demo)', function(elem){
layer.msg(elem.text());
});
});
</script>二、应用教程
1、下载layui压缩包；
2、解压后，将文件夹内”layui“文件夹整体拷贝入当前项目；
3、html引入layui.css（注意路径正确）；
4、拷贝需要效果HTML代码（和JS）即可完成使用应用。
项目
操作
备注
框架
layui
引入CSS
需要
<link rel="stylesheet" href="layui/css/layui.css" media="all">
引入JS
需要
<script src="layui/layui.js"></script>
layui教程
layui使用教程
layui教程地址
三、单独演示与下载