layui导航总结

版权声明：本文为博主原创文章，未经博主允许不得转载。 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	空值（默认） 不收缩兄弟菜单子菜单 all 收缩全部兄弟菜单子菜单	展开子菜单时，是否收缩兄弟节点已展开的子菜单 （注：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="-" 来自定义分隔符。如： 首页- 国际新闻- 亚太地区- 正文

还可以作为小导航来用

娱乐| 八卦| 体育| 搞笑| 视频| 游戏| 综艺