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

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


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插件——多级垂直导航菜单源码下载
阅读更多
个人分类: Web前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭