本文作者:心月

layui框架导航栏的实现

心月IT博客 2019-10-10
layui框架导航栏的实现摘要: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导航效果演示

文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2019-10-10
若转载请注明原文及出处:https://www.xinyueseo.com/webfe/384.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 0 条评论,人围观)参与讨论