<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 導航相關 - 頁面元素

      導航一般指頁面引導性頻道集合,多以菜單的形式呈現,可應用于頭部和側邊,是整個網頁畫龍點晴般的存在。面包屑結構簡單,支持自定義分隔符。千萬不要忘了加載 element模塊。雖然大部分行為都是在加載完該模塊后自動完成的,但一些交互操作,如呼出二級菜單等,需借助element模塊才能使用。你可以移步文檔左側【內置模塊 - 常用元素操作 element】了解詳情
      依賴加載模塊:element

      <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>
            

      設定layui-this來指向當前頁面分類。


      導航中的其它元素


      除了一般的文字導航,我們還內置了圖片和徽章的支持,如:

      <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>
            

      是否瞬間上了個檔次呢?

      導航主題



      通過對導航追加CSS背景類,讓導航呈現不同的主題色

      //如定義一個墨綠背景色的導航
      <ul class="layui-nav layui-bg-green" lay-filter="">
        …
      </ul>      
            

      水平導航支持的其它背景主題有:layui-bg-cyan(藏青)、layui-bg-molv(墨綠)、layui-bg-blue(艷藍)
      垂直導航支持的其它背景主題有:layui-bg-cyan(藏青)

      垂直/側邊導航

      <ul class="layui-nav layui-nav-tree" lay-filter="test">
      <!-- 側邊導航: <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="">跳轉</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>
            

      水平、垂直、側邊三個導航的HTML結構是完全一樣的,不同的是:

      垂直導航需要追加class:layui-nav-tree
      側邊導航需要追加class:layui-nav-tree layui-nav-side

      導航可選屬性

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

      屬性名 可選值 說明
      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>

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

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

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

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

      當然,你還可以作為小導航來用,如:

      娛樂 八卦 體育 搞笑 視頻 游戲 綜藝

      <span class="layui-breadcrumb" lay-separator="|">
        <a href="">娛樂</a>
        <a href="">八卦</a>
        <a href="">體育</a>
        <a href="">搞笑</a>
        <a href="">視頻</a>
        <a href="">游戲</a>
        <a href="">綜藝</a>
      </span>
            

      layui - 用心與你溝通

      亚洲图色