Layui页面元素之导航

Layui页面元素之导航

Layui入门 导航水平导航导航主题垂直/侧边导航面包屑

Layui入门

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 使用Layui首先需要下载Layui的学习文档 官方链接 里边包含的内容： 下载完毕后部署到项目里 使用Layui需要在页面引入两个文件：

<link rel="stylesheet" href="static/js/layui/css/layui.css" media="all"> <script src="static/js/layui/layui.all.js" charset="utf-8"></script>

导航

水平导航

水平导航一般使用在首页等地方 水平导航的关键字为layui-nav

<ul class="layui-nav" lay-filter=""> <li class="layui-nav-item"><a href="">最新活动</a></li> <li class="layui-nav-item layui-this"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> <li class="layui-nav-item"> <a href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <!-- 二级菜单 --> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">社区</a></li> </ul> <script> layui.use('element', function(){ var element = layui.element; });

效果图：

除了文字形式，还可以将导航栏的内容转换成图片或徽章

<ul class="layui-nav"> <li class="layui-nav-item"> <a href="">控制台<span class="layui-badge">9</span></a> </li> <li class="layui-nav-item"> <a href="">个人中心<span class="layui-badge-dot"></span></a> </li> <li class="layui-nav-item"> <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">修改信息</a></dd> <dd><a href="javascript:;">安全管理</a></dd> <dd><a href="javascript:;">退了</a></dd> </dl> </li> </ul>

效果图：

导航主题

可以将导航栏的背景设置成自己想要的颜色 只需要在ul中的class加上颜色

<ul class="layui-nav layui-bg-blue">...</ul>

垂直/侧边导航

垂直导航和侧边导航一般使用在需要分类的地方 垂直导航的关键字为layui-nav-tree

<ul class="layui-nav layui-nav-tree" lay-filter="test"> <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="">跳转</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模版</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>

垂直导航效果图 在垂直导航代码的后面加入 layui-nav-side 就是侧边导航 侧边导航效果图： 水平导航、垂直导航和侧边导航的区别： 垂直导航需要在ul中的class里加入layui-nav-tree； 侧边导航需要在ul中的class里加入layui-nav-tree layui-nav-side；

面包屑

<span class="layui-breadcrumb"> <a href="">惊悚</a> <a href="">搞笑</a> <a href="">言情</a> <a><cite>恐怖</cite></a> </span>

效果图： 其中的分割符可以自定义，在span标签里面加入lay-separator="-"：

<span class="layui-breadcrumb" lay-separator="-">

结语： 使用了导完包后可以在官网复制按钮的代码查看是否有效果，没有效果的话可以Ctrl+Shift+Delete清除浏览器缓存，然后检查引入的语句有没有出错