導航相關 - 頁面元素

                    導航一般指頁面引導性頻道集合,多以菜單的形式呈現,可應用于頭部和側邊,是整個網頁畫龍點晴般的存在。面包屑結構簡單,支持自定義分隔符。千萬不要忘了加載 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 - 用心與你溝通

                    亚洲图色