layUI实现三级导航菜单效果


Posted in Javascript onJuly 26, 2019

本文实例为大家分享了layUI实现三级导航菜单展示的具体代码,供大家参考,具体内容如下

废话不多说,直接上代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>layout 后台大布局 - Layui</title>
 <link rel="stylesheet" href="../css/layui.css" rel="external nofollow" >
 <script src="../layui.js"></script>
 <style>
 .layui-layout-left{position: absolute !important; left: 0px; top: 0;}
 /*layui child nav*/
 .layui-nav-child{display: none; position: absolute; left: 0; top: 65px; min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #d2d2d2; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap;}
 .layui-nav .layui-nav-child a{color: white;}
 .layui-nav .layui-nav-child a:hover{background-color:deepskyblue; color: white;}
 .layui-nav-child dd{position: relative;}
 .layui-nav-child dd.layui-this{background-color: transparent; color: white;}
 .layui-nav .layui-nav-child dd.layui-this a{background-color: transparent; color: white;}
 .layui-nav-child dd.layui-this:after{display: none;}
 /*layui third level nav*/
 .layui-nav-third-child{display: none; position: absolute; left: 105px;top:25px;min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #d2d2d2; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap;}
 .layui-nav .layui-nav-third-child a{color: white;}
 .layui-nav .layui-nav-third-child a:hover{background-color:deepskyblue; color: white;}
 .layui-nav-third-child li{position: relative;}
 .layui-nav-third-child li{background-color: transparent; color: white;}
 .layui-nav .layui-nav-third-child li.layui-this a{background-color: transparent; color: white;}
 .layui-nav-third-child li:after{display: none;}
 </style>
</head>
<body class="layui-layout-body ">
<div class="layui-layout layui-layout-admin layui-bg-blue">

 <div class="layui-header layui-bg-blue">
  <div style="margin-left: 20px">
  <b style="font-size: 35px">船信保密安全综合管控平台</b><br>
  <b>CSIT integrated Control System of Confidentiality and Security</b>

  </div>
 <!-- 头部区域(可配合layui已有的水平导航) -->

 <ul class="layui-nav layui-layout-right">
  <li class="layui-nav-item">
  <a href="javascript:;" >
   <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
   贤心
  </a>
  <dl class="layui-nav-child">
   <dd><a href="#" >基本资料</a></dd>
   <dd><a href="#" >安全设置</a></dd>
  </dl>
  </li>
  <li class="layui-nav-item"><a href="">退了</a></li>
 </ul>
 </div>
 <div class="layui-header layui-bg-blue">
 <!-- 头部区域(可配合layui已有的水平导航) -->
 <ul class="layui-nav layui-layout-left">
  <li class="layui-nav-item"><a href="#" >控制台</a></li>
  <li class="layui-nav-item"><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 layui-bg-blue">
   <dd><a href="">邮件管理</a></dd>
   <dd><a href="">消息管理</a></dd>
   <dd><a href="">授权管理</a></dd>
   <dd>
   <a href="javascript:;" class="third-class">其它系统2</a>
   <ol class="layui-nav-third-child layui-bg-blue">
    <li><a href="">邮件管理2</a></li>
    <li><a href="">消息管理2</a></li>
    <li><a href="">授权管理2</a></li>
   </ol>
   </dd>
   <dd>
   <a href="javascript:;" class="third-class">其它系统3</a>
   <ol class="layui-nav-third-child layui-bg-blue">
    <li><a href="">邮件管理3</a></li>
    <li><a href="">消息管理3</a></li>
    <li><a href="">授权管理3</a></li>
   </ol>
   </dd>

  </dl>
  </li>
 </ul>
 </div>
 <div class="layui-body">
 <!-- 内容主体区域 -->
 <div style="padding: 15px;">内容主体区域</div>
 </div>

 <div class="layui-footer">
 <!-- 底部固定区域 -->
 © layui.com - 底部固定区域
 </div>
</div>
<script>
//JavaScript代码区域
 layui.use(['element','jquery'], function(){
 var element = layui.element,$=layui.jquery;
 $(".layui-nav-third-child").hide();
 $(".third-class").on('click',function () {
  $(".layui-nav-third-child").hide();
  $(this).next().show();
 });
 });
</script>
</body>
</html>

style中是重写了layui的全局样式,为了调节需要的颜色可忽略,思路是依照layui样式的显现关系,通过控制third-child的显示隐藏达到三级菜单的目的。需要引用小箭头的只需引入layui-tab-more,建议去看看他的实现方式,作为一个javaer我是没想到小三角还能如此简单的实现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
layui实现三级联动效果
Jul 26 #Javascript
layui实现三级导航菜单
Jul 26 #Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 #Javascript
详解nvm管理多版本node踩坑
Jul 26 #Javascript
layui自定义ajax左侧三级菜单
Jul 26 #Javascript
layui递归实现动态左侧菜单
Jul 26 #Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 #Javascript
You might like
深入PHP magic quotes的详解
2013/06/17 PHP
php导出CSV抽象类实例
2014/09/24 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
javascript jQuery插件练习
2008/12/24 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
js实现分页功能
2017/05/24 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
Vue中props的详解
2019/05/16 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
python爬取51job中hr的邮箱
2016/05/14 Python
Python查询IP地址归属完整代码
2017/06/21 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
python爬虫之遍历单个域名
2019/11/20 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
资深地理教师自我评价
2013/09/21 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
国旗下的演讲稿
2014/05/08 职场文书
违反交通法规检讨书
2014/09/10 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
安全教育日主题班会
2015/08/13 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书