版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41179401/article/details/84871224
layui导航总结
导航类使用类名:class="layui-nav" 选项使用class="layui-nav-item" ,子导航使用 class="layui-nav-child"
设定layui-this来指向当前页面分类。
<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>
//注意:导航 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
});
</script>
1 通过对导航追加CSS背景类,让导航呈现不同的主题色
class="layui-nav layui-bg-green"
水平导航支持的其它背景主题有:layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)
垂直导航支持的其它背景主题有:layui-bg-cyan(藏青)
垂直导航需要追加class:layui-nav-tree
侧边导航需要追加class:layui-nav-tree layui-nav-side
2 导航的可选属性
对导航元素结构设定可选属性,可让导航菜单项达到不同效果。目前支持的属性如下:
属性名 | 可选值 | 说明 |
---|---|---|
lay-shrink |
|
展开子菜单时,是否收缩兄弟节点已展开的子菜单 (注:layui 2.2.6 开始新增) 如:<ul class="layui-nav layui-nav-tree" lay-shrink="all"> … </ul> |
lay-unselect | 无需填值 | 点击指定导航菜单时,不会出现选中效果(注:layui 2.2.0 开始新增) 如:<li class="layui-nav-item" lay-unselect>刷新</li> |
3 面包屑
class="layui-breadcrumb"
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
你还可以通过设置属性 lay-separator="-" 来自定义分隔符。如: 首页- 国际新闻- 亚太地区- 正文
还可以作为小导航来用