jQuery插件——多级垂直导航菜单（适合后台系统）

最新推荐文章于 2024-05-19 09:58:49 发布
最新推荐文章于 2024-05-19 09:58:49 发布
阅读量4.8k 收藏 3
点赞数 1
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liaogang_1983/article/details/80832885
版权

最近自己做了一个适合后台系统的多级垂直导航菜单，给大家分享一下，可以作为练习实例或参考。


HTML文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--导入jquery-->
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<!--导入自定义js文件-->
		<script type="text/javascript" src="js/navMenu.js" ></script>
		<!--导入自定义css-->
		<link rel="stylesheet" href="css/navMenu.css" />
		<!--导入Font Awesome图标字库css文件-->
		<link rel="stylesheet" href="css/font-awesome.css" />
		<style>
			.navMenuBox{
				width: 200px;
				height: 500px;
			}
			
		</style>
	</head>
	<body>
		<!--包裹层-->
		<div class="navMenuBox">
			<!--一级菜单-->
			<ul class="navMenu">
				<!--菜单项-->
				<li>
					<!--arrow类给具有下级菜单项添加箭头图标-->
					<a href="#" class="arrow">主页</a>
					<!--子菜单-->
					<ul class="subMenu">
						<li><a href="#">用户管理</a></li>
						<li><a href="#">角色管理</a></li>
						<li><a href="#">权限管理</a></li>
						<li>
							<a href="#" class="arrow">我的任务</a>
							<!--子菜单-->
							<ul class="subMenu">
								<li><a href="#">任务一</a></li>
								<li><a href="#">任务二</a></li>
								<li><a href="#">任务三</a></li>
								<li><a href="#">任务四</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">文章管理</a></li>
				<li>
					<a href="#" class="arrow">网站管理</a>
					<!--子菜单-->
					<ul class="subMenu">
						<li><a href="#">网站设置</a></li>
						<li><a href="#">友情链接</a></li>
						<li><a href="#">分类管理</a></li>
						<li><a href="#">系统日志</a></li>
					</ul>
				</li>
			</ul>
			</ul>
		</div>
	</body>
</html>

CSS文件

/*添加背景色和滚动条*/
.navMenuBox {
	background-color: #1c2229;
	overflow:auto;
}

/*去掉默认样式*/
.navMenuBox ul,
.navMenuBox li {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.navMenu>li>a {
	display: block;
	line-height: 40px;
	font-size: 17px;
	text-decoration: none;
	color: #ABB1B7;
	border-top: 1px solid #222932;
	border-bottom: 2px solid #191e24;
}

.navMenu>li.active>a,
.navMenu>li>a:hover,
.subMenu>li.active>a,
.subMenu>li>a:hover {
	color: #FFF;
	background: #12181b;
}

.subMenu>li>a {
	display: block;
	line-height: 36px;
	font-size: 16px;
	text-decoration: none;
	color: #ABB1B7;
}

ul.subMenu {
	margin-top: 8px;
	margin-left: 10px;
	padding-bottom: 5px;
}

.subMenu>li> a {
	padding-left: 20px;
}

a.arrow:after {
	display: block;
	float: right;
	margin-right: 15px;
	font-size: 16px;
	line-height: 40px;
	font-family: FontAwesome;
	content: "\f105";
	font-weight: 300;
	text-shadow: none;
}

li.active>a.arrow:after {
	display: block;
	float: right;
	margin-right: 15px;
	font-size: 16px;
	line-height: 40px;
	font-family: FontAwesome;
	content: "\f107";
	font-weight: 300;
	text-shadow: none;
}

.navMenu>li>a:before{
	display: block;
	float: left;
	margin: 0 5px;
	font-size: 20px;
	line-height: 40px;
	font-family: FontAwesome;
	content: "\f0ac";
	font-weight: 300;
	text-shadow: none;
}

JS 文件

$(function(){
	//初始化
	$('.subMenu').hide();
	$('li.active>.subMenu').show();
	
	//给菜单项添加事件
	$('.navMenu a').click(function(){
		//获取所属列表ul
		var $subMenuElement=$(this).next();
		var $liElement=$(this).parent();
		var $ulElement=$(this).parent().parent();
		//没有子菜单，则直接返回
		if(!$subMenuElement.is('ul'))
		{
			$ulElement.find('li').removeClass('active');
			$ulElement.find('ul.subMenu').slideUp();
			$liElement.addClass('active');
			return;
		}
		//如果存在子菜单，则打开或者关闭
		if(! $liElement.hasClass('active')){
			$ulElement.find('li').removeClass('active');
			$ulElement.find('ul.subMenu').slideUp();
			$liElement.addClass('active');
			$subMenuElement.slideDown();
		}else{
			//打开状态 则关闭本菜单
			$subMenuElement.slideUp();
			$liElement.removeClass('active');
			
		}
	});
});
jQuery插件——多级垂直导航菜单源码下载
坚强的小刚
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
分享5款不同的多级导航切换DIV的jQuery特效
weixin_30371469的博客
05-12 110
　　5款不同的多级导航切换的jQuery特效,非常适用于APP前端特效，点击二级菜单会切换出三级菜单来替换二级菜单。再次点击又会切换回二级菜单，每款都有很炫酷的特效。欢迎大家下载源码研究研究此特效。 　　个人比较喜欢这种切换的效果。过渡效果都还不错。(点击的时候可以注意观察每行的小三角形的变化) 主要的HTML代码： 1 <li> 2 <a href="#...
19款绚丽实用的jQuery/CSS3侧边栏菜单
weixin_33795806的博客
10-12 1881
jQuery作为一款主流的JavaScript前端开发框架，深受广告开发者的亲睐，同时jQuery有着不计其数的插件，特别是菜单插件更为丰富，本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单，这些侧边栏菜单可以用在不同风格的网页上，如果你觉得不错，也可以进入其下载页面下载菜单源代码。 1、jQuery 3D 垂直多级菜单 可筛选菜单项 这是一款手风琴样式的垂直多级菜单，其特点是利用C...
html实现导航栏
最新发布
studyinstall的博客
05-19 931
【代码】【无标题】
jquery写竖切换
pumpkin_truck的博客
03-22 196
jquery写竖切换 随着技术的发展，现在人们越来越重视样式的优美，在一个项目中，给人们呈现出来优美的页面是非常重要的，尤其是首页。因为不管是什么功能的实现都是需要根据首页的提示。而首页中导航也挺重要。今天我们就来写一个竖切换的导航条。 jquare是对DOM一些操作方法的封装，用它来实现一些简单的操作无疑是最为恰当的。接下来我们就来实现下面这个导航图。 在这里插入图片描述 当进入的时候，二级菜单会被隐藏起来，当我点击下面的任意一个，其二级菜单就会出来，点击下一个时，上一个又藏起来。 首先我们来搭建一下
demo-多级导航菜单（jQuery）
DcTbnk的博客
06-12 366
一.demo css html js <!-- js --> <script src="./course29/jquery.js"></script> <script> $(function () { $('li:has(ol)').click(function (e) { // target 显示点击元素的标签名 if ($(e.tar
用jquery根据json动态创建多级菜单导航
weixin_30379531的博客
06-28 636
HTML结构： <section class="sidebar"></setion> { "liClass": "active treeview", "link": "index2.html", "label": "结构预览", "iClass": "'fa fa-dashboard'", ...
jquery插件——多级菜单
12-12
在这个“jquery插件——多级菜单”项目中，我们可能看到以下关键技术点： 1. **CSS样式和布局**：多级菜单的呈现通常依赖于CSS来实现层次感。通过设置适当的`display`属性（如`none`和`block`），我们可以控制菜单...
jQuery垂直多级导航菜单代码
04-07
本教程将深入探讨如何使用jQuery创建一款黑色风格的垂直多级导航菜单。jQuery是一种强大的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得创建交互式网页变得更加简单。 首先，我们需要了解基础HTML结构...
jQuery响应式多级下拉导航菜单特效
04-06
"jQuery响应式多级下拉导航菜单特效"就是这样一个解决方案，它结合了jQuery的动态效果和CSS3的现代特性，实现了在不同设备上优雅展示多级菜单的效果。 jQuery是一个轻量级的JavaScript库，它的API简单易用，使得...
jQuery垂直多级导航菜单代码分享
10-23
介绍了基于jQuery实现的一个简单大方的垂直导航菜单，过度平滑,需要的朋友可以参考下
jquery插件库-jquery多级菜单导航.zip
03-15
这个"jquery插件库-jquery多级菜单导航.zip"压缩包显然包含了与jQuery相关的资源，特别是针对多级菜单导航的实现。在本文中，我们将深入探讨jQuery插件库中的多级菜单导航技术，以及如何利用这些工具来增强网站的...
9种不同风格的CSS垂直导航菜单
12-31
9种不同风格的CSS垂直导航菜单免费下载
精美的多级侧边栏导航菜单jQuery插件
07-10
精美的多级侧边栏导航菜单jQuery插件
jQuery垂直多级导航菜单代码.zip
07-04
jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载。
水平和垂直方向的三级PopMenu-弹出菜单（DIV+CSS+JS）
weixin_30709635的博客
12-25 155
水平和垂直方向的三级PopMenu-弹出菜单（DIV+CSS+JS） 其实这种菜单个人认为应该称作二级，但很多朋友都习惯把它叫作三级，就顺其自然吧！在IE6.0 IE5.X Firefox1.x NS7.2 Opera8.0中都能正确显示，只用到很少的JS代码，使用时只要把<ul></ul>部分插入需要的地方即可。水平方...
html下拉菜单hover,css用hover制作下拉菜单
weixin_33514582的博客
06-04 1653
首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下:Title*{margin: 0;}.title{background-color: #2b99ff;height: 50px;line-height: 50px;text-align: center;color: #3d2fa2;}.user{width: 180px;height: 50p...
【移动端】仿hover效果触发导航菜单展开
Maximus_ckp的博客
09-18 4000
PC端，很多交互是由鼠标滑过触发伪类‘:hover’来实现的， 而移动端是没有鼠标hover事件的， 我们可以将原来响应:hover的DOM元素， 绑定监听touchstart和touchend， 动态添加/除去 ‘.hover’这个类来达到等价于PC端交互的效果。逻辑核心: **onTouchStart 相当于 onMouseOver， onTouchEnd 相当于 onMouseOu
一级菜单hover进入二级菜单，二级菜单不消失
热门推荐
qq_34485818的博客
05-28 1万+
在写分级菜单时遇到问题：      设置一级菜单：hover效果显示二级菜单时，当鼠标从一级菜单移入二级菜单时，一级菜单因失去鼠标而导致二级菜单消失       根据一二级菜单DOM关系提出不同思路：               一级菜单包裹二级菜单                   一级菜单 二级菜单
html导航栏制作css伪类,利用:hover伪类制作二级导航菜单
weixin_39641334的博客
06-22 494
该楼层疑似违规已被系统折叠隐藏此楼查看此楼/*重置所有元素的三个样式为零，一般不推荐这样使用，但是我测试一般这么写*/* {margin:0; padding:0; border:0;}a {text-decoration:none; color:#000;}body {font-size:12px; font-family:"微软雅黑";}ul,ol {list-style:none;}ul ...
jQuery插件之——简单日历
05-23
在这里，我将向你介绍如何使用jQuery创建一个简单的日历插件。 首先，我们需要在HTML文件中引入jQuery库和我们自己的脚本文件： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值