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>

　　

基础类: