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定义类和对象的几种方式
Nov 09 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
vue router 配置路由的方法
Jul 26 Javascript
javascript 内存模型实例详解
Apr 18 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写日志的实现方法
2014/11/05 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
Python实现类的创建与使用方法示例
2017/07/25 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
python 字符串常用方法汇总详解
2019/09/16 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
简单了解如何封装自己的Python包
2020/07/08 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
英国电气世界:Electrical World
2019/09/08 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
计算机开发个人求职信范文
2013/09/26 职场文书
行政专员工作职责
2013/12/22 职场文书
银行给客户的感谢信
2015/01/23 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
工作服管理制度范本
2015/08/06 职场文书
python基础之文件处理知识总结
2021/05/23 Python
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS