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  導航的可選屬性

對導航元素結構設定可選屬性，可讓導航選單項達到不同效果。目前支援的屬性如下：

 3 麵包屑

class="layui-breadcrumb"

首頁/ 國際新聞/ 亞太地區/ 正文

<span class="layui-breadcrumb">
  <a href="">首頁</a>
  <a href="">國際新聞</a>
  <a href="">亞太地區</a>
  <a><cite>正文</cite></a>
</span>

你還可以通過設定屬性 lay-separator="-" 來自定義分隔符。如： 首頁- 國際新聞- 亞太地區- 正文

還可以作為小導航來用

娛樂| 八卦| 體育| 搞笑| 視訊| 遊戲| 綜藝