layui導航欄知識

本節知識:使用ul和li標簽加上layui的導航類組成導航欄

基礎類:
注意：導航 依賴 element 模塊，否則無法進行功能性操作
　　layui-nav：放在ul里面定義一個導航欄
　　layui-nav-item:放在li里面定義一個導航欄的菜單項
　　layui-nav-img:放在li里面定義一個帶圖片的菜單項
一些特殊用法:
　　1.可以在li里面加個a標簽，用來表示可以跳轉的菜單項
　　2.可以在li里面加個a標簽，再在a里面加一個img，用來點擊圖片跳轉
　　3.二級菜單的類  layui-nav-child  加上dl（里面放layui-nav-child）和dd標簽  注意二級菜單必須代培element對象

1.水平導航欄：layui-nav

2.垂直導航欄:layui-nav layui-tree

3.側邊欄:layui-nav layui-tree layui-side

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

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

4.面包屑：layui-breadcrumb

eg:水平導航欄

　　　　<--水平導航欄-->

1. <ul class="layui-nav" lay-filter="">
2. <li class="layui-nav-item"><a href="">最新活動</a></li>
3. <li class="layui-nav-item layui-this"><a href="">產品</a></li>
4. <li class="layui-nav-item"><a href="">大數據</a></li>
5. <li class="layui-nav-item">
6. <a href="javascript:;">解決方案</a>
7. <dl class="layui-nav-child"> <!-- 二級菜單 注意二級菜單dd里面必須是a標簽，否則不好使-->
8. <dd><a href="">移動模塊</a></dd>
9. <dd><a href="">后台模版</a></dd>
10. <dd><a href="">電商平台</a></dd>
11. </dl>
12. </li>
13. <li class="layui-nav-item"><a href="">社區</a></li>
14. </ul>
16. <script>
17. //注意：導航 依賴 element 模塊，否則無法進行功能性操作
18. layui.use('element', function(){
19. var element = layui.element;
21. //…
22. });
23. </script>

eg:垂直導航欄

基本類:
　　layui-nav-tree:定義垂直導航欄 用法:把layui-nav layui-nav-tree放入ul中，表示定義一個垂直導航欄
　　layui-nav-side:定義側邊欄     用法:把layui-nav layui-nav-tree layui-nav-side放入ul中，表示定義一個側邊欄
　　layui-nav-itemed:定義一個展開的二級菜單   用法;把layui-nav-item layui-nav-itemed放入li中，表示定義一個展開的二級菜單項

1. <ul class="layui-nav layui-nav-tree" lay-filter="test">
2. <!-- 側邊導航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
3. <li class="layui-nav-item layui-nav-itemed">
4. <a href="javascript:;">默認展開</a>
5. <dl class="layui-nav-child">
6. <dd><a href="javascript:;">選項1</a></dd>
7. <dd><a href="javascript:;">選項2</a></dd>
8. <dd><a href="">跳轉</a></dd>
9. </dl>
10. </li>
11. <li class="layui-nav-item">
12. <a href="javascript:;">解決方案</a>
13. <dl class="layui-nav-child">
14. <dd><a href="">移動模塊</a></dd>
15. <dd><a href="">后台模版</a></dd>
16. <dd><a href="">電商平台</a></dd>
17. </dl>
18. </li>
19. <li class="layui-nav-item"><a href="">產品</a></li>
20. <li class="layui-nav-item"><a href="">大數據</a></li>
21. </ul>

eg:面包屑

基礎類:
　　layui-breadcrumb:定義一個面包屑  放在span標簽里面
　　layui-separator屬性:定義面包屑的分隔符 放在span標簽里面
　　cite標簽;標簽定義作品(比如書籍、歌曲、電影、電視節目、繪畫、雕塑等等)的標題

　　

1. <span class="layui-breadcrumb" lay-separator="-">
2. <a href="">首頁</a>
3. <a href="">國際新聞</a>
4. <a href="">亞太地區</a>
5. <a><cite>正文</cite></a>
6. </span>

　　面包屑還可以做小導航

<

1. <span class="layui-breadcrumb" lay-separator="|">
2. <a href="">娛樂</a>
3. <a href="">八卦</a>
4. <a href="">體育</a>
5. <a href="">搞笑</a>
6. <a href="">視頻</a>
7. <a href="">游戲</a>
8. <a href="">綜藝</a>
9. </span>

　　

基礎類: