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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
js日期联动示例
May 02 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
如何基于js判断浏览器版本
Feb 20 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获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
Python re模块介绍
2014/11/30 Python
详解Python中的条件判断语句
2015/05/14 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Python字典的核心底层原理讲解
2019/01/24 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
项目开发计划书
2014/01/09 职场文书
医学生求职信
2014/07/01 职场文书
异地年检委托书范本
2014/09/24 职场文书
个人专业技术总结
2015/03/05 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android