博客列表 >23.jQuery二级菜单导航

23.jQuery二级菜单导航

万物皆对象
万物皆对象原创
2019年02月21日 13:22:111100浏览

实例

<!DOCTYPE html>
<html>
<head>
	<title>jQuery三级下拉菜单</title>
	<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		ul, li{list-style: none;}
		.box{width:1000px;height:500px;background: url(images/568.jpg) no-repeat;margin: 0 auto;}
		.menu{
			width: 1000px;
			height: 50px;
			margin: 0 auto;
			display: none;
			box-shadow: 0 2px 2px rgba(10,16,20,.24),0 0 2px rgba(10,16,20,.12);
			background: pink;
			opacity: 0.8;
			/*position: fixed;*/
		}
		ul li{
			width: 100px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			cursor: pointer;
			float: left;
			font-size: 16px;
			color: black;
		}
		ul li:hover{
			background: deeppink;
			color: #fff;
		}
		
		.item1 li{width:100px;height:50px;background: pink;box-shadow: 0 2px 2px rgba(10,16,20,.24);position: relative;}
		.item2{position: absolute;top: 0px;left: 100px;}
		.item3{position: absolute;top: 0px;left: 100px;}
		.item4 li{position: absolute;width: 1000px;height: 300px;background: pink;}

		.left,.right{width: 220px;height: 500px;background: pink;box-shadow: 0 2px 2px rgba(10,16,20,.24);}
		.left{float: left;margin-top: -500px;margin-left: -220px;}
		.right{float: right;margin-top: -500px;margin-right: -220px;}
	</style>
</head>
<body>
	<div class="box">
		<div class="menu">
			<ul class="first">
				<li>首页
					<ul class="item4"> <!-- 二级菜单 -->
						<li>内容</li>
					</ul>
				</li>
				<li>动画
					<ul class="item1"> <!-- 二级菜单 -->
						<li>动画2</li>
						<li class="two">3级菜单→
							<ul class="item2"><!-- 三级菜单 -->
								<li>我是3级菜单</li>
								<li>我是3级菜单</li>
								<li>我是3级菜单</li>
							</ul>
						</li>
						<li>动画2</li>
						<li class="two">3级菜单→
							<ul class="item2"><!-- 三级菜单 -->
								<li>我是3级菜单</li>
								<li>我是3级菜单</li>
								<li class="four">4级菜单→
									<ul class="item3"><!-- 四级菜单 -->
										<li>我是4级菜单</li>
										<li>我是4级菜单</li>
										<li>我是4级菜单</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="cont">←番→</li>
				<li>音乐</li>
				<li>舞蹈</li>
				<li>国创</li>
				<li>鬼畜</li>
				<li>生活</li>
				<li>搞笑</li>
				<li>其他</li>
			</ul>
		</div>
	</div>
	<div class="left">内容</div>
	<div class="right">内容</div>
</body>
</html>
<script type="text/javascript">
	$(document).ready(function(){
		$('.menu').slideDown(500);

		// 隐藏二级与三级菜单
		$('.item1').hide();
		$('.item2').hide();
		$('.item3').hide();
		$('.item4').hide();

		// 当鼠标 移入 包含二级菜单的一级菜单时 显示 当前二级菜单
		$('.first>li').mouseover(function(){
			$(this).find('.item1').slideDown(100);
		});
		// 当鼠标 移出 包含二级菜单的一级菜单时 隐藏 当前二级菜单
		$('.first>li').mouseleave(function(){
			$(this).find('.item1').slideUp(100);
		});

		// 当鼠标 移入 包含三级菜单的二级菜单时 显示 当前三级菜单
		$('.two').mouseover(function(){
			console.log(this)
			$(this).find('.item2').slideDown(100);
		});
		// 当鼠标 移出 包含三级菜单的二级菜单时 隐藏 当前三级菜单
		$('.two').mouseleave(function(){
			$(this).find('.item2').slideUp(100);
		});


		// 当鼠标 移入 包含四级菜单的三级菜单时 显示 当前四级菜单
		$('.four').mouseover(function(){
			$(this).find('.item3').slideDown(100);
		});
		// 当鼠标 移出 包含四级菜单的三级菜单时 隐藏 当前四级菜单
		$('.four').mouseleave(function(){
			$(this).find('.item3').slideUp(100);
		});

		$('.first>li').hover(function(){
			$(this).find('.item4').fadeIn(800);
		},function(){
			$(this).find('.item4').fadeOut(500);
		});

		$('.first>.cont').mouseover(function(){
			$('.left').animate({marginLeft: '0px'});
			$('.right').animate({marginRight: '0px'});
		});
		$('.first>.cont').mouseleave(function(){
			$('.left').animate({marginLeft: '-220px'});
			$('.right').animate({marginRight: '-220px'});
		});

	});
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190221132059.jpg

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议