LayUI 导航栏

概述

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。

官网：https://www.layui.com/doc/element/nav.html

使用

导航主要类

• layui-nav：导航栏
• layui-nav-item：导航条目
• 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(){
});
</script>

追加不同的 CSS 背景类 可以呈现不同的颜色

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）

垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

//如定义一个墨绿背景色的导航
<ul class="layui-nav layui-bg-green" lay-filter="">
  …
</ul>

垂直导航 & 侧边导航

垂直导航（不会布满整个左侧） 只需在 水平导航栏追加 class：layui-nav-tree

侧边导航（会布满整个左侧） 需要追加 class：layui-nav-tree、 layui-nav-side

<!-- 相比垂直追加 layui-nav-tree 类-->
<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>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
    });
</script>

导航添加图片及徽章元素

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

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
    });
</script>

还有其他的导航栏请看官网