京东导航的jquery实现

最新推荐文章于 2021-10-16 02:47:54 发布

原创最新推荐文章于 2021-10-16 02:47:54 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #导航 #京东 #菜单 #ViewUI

JavaScript 同时被 2 个专栏收录

9 篇文章

订阅专栏

web设计（html+css）

4 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的三级下拉导航菜单。该菜单具备良好的交互体验，包括鼠标悬停时的样式变化及子菜单的展开与隐藏效果。

1、先看一下效果图

2、规划好html的结构

<!-- 放导航的容器 -->
	<div id="left">
		<!--一个item1是一个一级导航 -->
		<div class="item1">
			<!-- 一级导航标题-->
			<h1>一级标题</h1>
			<!-- 一个item2是一个二级导航-->
			<div class="item2">
				<!-- 二级导航标题-->
				<h1>二级标题</h1>
				<!-- 三级导航块-->
				<div class="item3">
					<!-- 内容-->
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
				</div>
				<h1>二级标题</h1>
				<div class="item3">
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
				</div>
				<h1>二级标题</h1>
				<div class="item3">
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
				</div>
			</div>
		</div>
		<div class="item1">
			<h1>一级标题</h1>
			<div class="item2">
				<h1>二级标题</h1>
				<div class="item3">
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
				</div>
				<h1>二级标题</h1>
				<div class="item3">
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
				</div>
				<h1>二级标题</h1>
				<div class="item3">
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
					<span><a href="">三级级标题</a></span>
				</div>
			</div>
		</div>
		
	</div>

3、定义好他们应有的样式，等会用js调用

/*定义宽*/
	#left,.item1,.item2,.item3,.item1_h1{
		width:250px;
	}
	#left{
		float:left;
		border:solid 2px #D00000;
	}
	#left h1{
		margin:0;
	}
	.item1,.item2{
		float:left;
	}
	/*一级导航标题样式*/
	.item1_h1{
		height:40px;
		background:url(bg.png);
		padding:0;
		font-size:14px;
		text-align:center;
		line-height:40px;
		color:#FFF;
	}
	/*鼠标移出二级标题的样式*/
	.item2_out{
		width:230px;
		height:25px;
		background:#FDF1DE;
		border-top:solid 1px #FDF1DE;
		border-bottom:solid 1px #FDF1DE;
		line-height:25px;
		color:#000;
		font-weight:normal;
		text-align:left;
		padding-left:20px;
		font-size:14px;
	}
	/*鼠标放到二级标题的样式*/
	.item2_over{
		width:230px;
		height:25px;
		line-height:25px;
		text-align:left;
		padding-left:20px;
		background:#FFF;
		border-top:solid 1px #CC3300;
		border-bottom:solid 1px #CC3300;
		color:#CC0000;
		font-weight:bold;
		font-size:14px;
	}
	/*浮动栏样式*/
	.item3{
		height:200px;
		background:#FFF;
		float:left;
		position:absolute;
		border:solid 1px #CC3300;
		padding:10px;
	}
	/*浮动栏上链接的样式*/
	.item3 a{
		color:#000;
		font-size:12px;
		text-decoration:none;
	}
	.item3 a:hover{
		color:#CC0000;
		text-decoration:underline;
		z-index:2;
	}

4、编写js控制代码

$(function(){
		//先把浮动框隐藏起来
		$(".item3").hide();
		//定义一级标题和二级标题的样式
		$(".item1>h1").addClass("item1_h1");
		$(".item2>h1").addClass("item2_out");
		
		//只有鼠标不在item2和item3上时浮动块才隐藏
		var isHide1 = true;
		var isHide2 = true;
		
		//当前在哪个item2的标题上(h1)
		var curItem;
		
		//遮盖浮动框左边需要隐藏的线
		var modalDiv = "<div id='lineModal' style='width:1px;height:25px;float:left;background:#FFF;position:absolute;z-index:4;'></div>";
		$("body").append(modalDiv);
		$("#lineModal").hide();
		
		//把item2下的h1增加hover事件，本来想用css定义hover，可以jquery无法触发浏览器默认hover
		$(".item2>h1").hover(function(){
			$(this).removeClass("item2_out");
			$(this).addClass("item2_over");
		},function(){
			$(this).removeClass("item2_over");
			$(this).addClass("item2_out");
		});
		//鼠标移动到item2的h1上显示item3
		$(".item2>h1").mouseover(function(){
			var subItem = $(this).next(".item3");
			if('none'==subItem.css("display")){
				var pos = $(this).position();
				subItem.css("top",pos.top);
				subItem.css("left",pos.left+$(this).width()-20);
				$("#lineModal").show();
				$("#lineModal").css("top",pos.top+1);
				$("#lineModal").css("left",pos.left+$(this).width()-20);
				subItem.show();
				curItem = $(this);
			}
		});
		//鼠标移出到item2的h1并且也不在item3上时隐藏item3
		$(".item2>h1").mouseout(function(){
			isHide1 = true;
			if(isHide1&&isHide2){
				$(this).next(".item3").hide();
				curItem.removeClass("item2_over");
				curItem.addClass("item2_out");
				$("#lineModal").hide();
			}
		});
		$(".item3").mouseover(function(){
			//不能够触发hover
			curItem.trigger("mouseover");
			if('none'==$(this).css("display")){
				$(this).show();
				isShow = false;
			}
		});
		$(".item3").mouseout(function(){
			isHide2 = true;
			if(isHide1&&isHide2){
				$(this).hide();
				curItem.removeClass("item2_over");
				curItem.addClass("item2_out");
				$("#lineModal").hide();
			}
		});
	});

5、需要的bg.png图片，附件有