layui框架导航栏的实现

心月IT博客 10-10

默认

摘要：layui 提供了多种导航，水平导航、带徽章和图标导航、垂直导航、侧边固定导航、面包屑导航等，可以满足绝大部分的项目开发中的导航需求。

如果不利用框架，我们要实现一个有特色的的导航可能要写很多代码。但有了layui，我们只需要短短几行代码就可以实现一个非常有特色的导航。

而且，layui 提供了多种导航，水平导航、带徽章和图标导航、垂直导航、侧边固定导航、面包屑导航等，可以满足绝大部分的项目开发中的导航需求，下面来看看，这些导航都是如何实现的。（核心css和js文件不要忘记）

【在使用lauyi组件功能的时候，最好从它的官方文档中拿代码，千万不要拿在线演示示例代码，因为它的在线演示示例代码中可能加了一些别的标签，最终导致在我们的项目中有些功能无法实现】

<!DOCTYPE html>
<html>
<head>
	<title>layui 框架使用</title>
	<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
	<script type="text/javascript" src="/layui/layui.js"></script>

</head>
<body>
	<fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="nav-theme">水平导航</a></legend>
    </fieldset>
	<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>

	<fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="nav-theme">带图片和徽章的导航</a></legend>
    </fieldset>
	<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>
 	
 	<fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="nav-theme">垂直/侧边导航</a></legend>
    </fieldset>
 	<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>

	<fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="nav-theme">面包屑导航</a></legend>
    </fieldset>
	<span class="layui-breadcrumb">
	  <a href="">首页</a>
	  <a href="">国际新闻</a>
	  <a href="">亚太地区</a>
	  <a><cite>正文</cite></a>
	</span>

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

【layui在使用时，不同的功能依赖的模块是不一样的，因此在查看文档时千万要注意<scrtipt> 内的 layui.use 用的是什么模块，这个模块是固定的，文档中写的是什么，在用的时候就写什么】

导航效果演示：

layui导航效果演示