layUI实现三级导航菜单效果

2024-08-18 22:01:28

本文实例为大家分享了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我是没想到小三角还能如此简单的实现。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

layui导航栏实现代码

本文实例为大家分享了layui水平导航菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航与面包屑</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <
layui自定义ajax左侧三级菜单

本文实例为大家分享了layui自定义ajax左侧三级菜单的具体代码,供大家参考,具体内容如下 HTML代码: 需引入layui.css代码  <div class="layui-side layui-bg-black" id="admin-side"> <div class="layui-side-scroll" id="admin-navbar-side" lay-f
layui点击导航栏刷新tab页的示例代码

layui的tab也默认是切换,不会刷新,想要达到点击导航栏刷新tab的功能只需在tab.js文件中将autoRefresh: false,改为true. 以上这篇layui点击导航栏刷新tab页的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
layui实现三级导航菜单

本文实例为大家分享了layui实现三级导航菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>.
layui递归实现动态左侧菜单

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下我知道两种方式实现: 一.先加载所有的主菜单,之后通过点击主菜单在加载该菜单的子菜单(缺点,如果判断是否已经加载过,那么动态添加了菜单,这里显示不出来,不判断的话,每次点击都会请求一次,这样请求的次数就太多了,服务器不太好的话可能会成为高并发的一个原因) 二.就是以下的了,使用递归一次性全部加载出来(缺点,耗费服务器内存) 如果动态添加一个菜单,你当前页面不手动刷新菜单不会显示,这个问题可以考虑用websock
layui实现左侧菜单点击右侧内容区显示

layui这个前端框架对后端人员来说提供了极大的方便,很大一部分同学在刚接触到这个框架就迫不及待的要动手实践了,刚好最近需要开发一个后台管理项目,就拿layui来进行学习和实践. 还没有接触到的同学可以先通读一遍文档,这样在遇到问题的时候才能够对症下药,仔细研究相关的板块今天我们先来学习一下使用layui来实现左侧点击菜单,内容区显示tab 实验效果实现过程 html代码 <!DOCTYPE html> <html lang="en"> <head&g
layUI实现三级导航菜单效果

本文实例为大家分享了layUI实现三级导航菜单展示的具体代码,供大家参考,具体内容如下废话不多说,直接上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
js+css实现三级导航菜单

本文实例为大家分享了js+css实现三级导航菜单的具体代码,供大家参考,具体内容如下导航菜单hover事件用css实现相对容易,只需要将透明度更改即可,如果想要菜单有一个渐变的效果,然而可惜的是transition并不支持display,所以用opacity实现效果完全相同. 下面是用css实现的完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&
jQuery实现简单漂亮的Nav导航菜单效果

本文实例讲述了jQuery实现简单漂亮的Nav导航菜单效果.分享给大家供大家参考,具体如下: 自己写的一个简单的导航菜单,先看效果: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一个 div 则是底部的蓝条,需要给第一项和最后一项设置不同的 class ,样式需要用到: <div id="nav"> <div class="navItem ind
js实现仿爱微网两级导航菜单效果代码

本文实例讲述了js实现仿爱微网两级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款仿爱微网两级导航菜单,tab选项卡形式的导航菜单,原生js做的tab选项卡型的导航菜单,需要鼠标点击才切换出二级子菜单,可修改成鼠标移过去就更换内容的形式. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fawei-web-nav-menu-style-codes/ 具体代码如下: <html> <head> <title&g
js实现带圆角的两级导航菜单效果代码

本文实例讲述了js实现带圆角的两级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用JS做的圆角菜单,支持两级菜单显示,本人比较喜欢的风格,修改使用方便,新手也能上手快.使用有几张圆角图片来修饰了菜单,喜欢的朋友可以下载代码留作收藏使用.真心不错的蓝色导航条代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cicle-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC
js实现的动画导航菜单效果代码

本文实例讲述了js实现的动画导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简单的动画导航菜单效果,每个菜单项的下边有一个横线会随着鼠标的对应而自动滑动,指明当前菜单的位置. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-animate-nav-menu-style-codes/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu
jQuery实现的背景动态变化导航菜单效果

本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变换,动态效果是在鼠标悬停时出现,也就是把鼠标放在菜单上的时候,背景即开始滚动起来,看上去漂亮极了,而且兼容性也是相当不错的,推荐给网页设计者使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-code
jQuery实现仿美橙互联两级导航菜单效果完整实例

本文实例讲述了jQuery实现仿美橙互联两级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的仿美橙互联两级导航菜单,效果不错吧,更像是一个滑动门,不会让你失望的. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-mchl-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/
jQuery模仿京东/天猫商品左侧分类导航菜单效果

现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事件,用得比较多的就是mouseover()和mouseout(),或者是他们两个的整合hover();所以之前我也是用的这种方法,但是一直调整都调整不到想要的效果!后来灵光一现,想着使用一下mouseenter()和mouseleave();结果分分钟想要的效果就出来了! 我的布局大致是这样的: <

layUI实现三级导航菜单效果

相关推荐

随机推荐