jQuery实现级联菜单（仿淘宝首页）

相信初学HTM+DIV+CSSl的同学们肯定也想做出淘宝网首页的菜单动画吧。今天我们就带大家体会一下级联菜单的显示。小编我只是实现了简单地效果，不过总体来说原理是一样的哦，那么先让大家看看效果图吧。

那么要实现这个效果我们当然要使用到的是jQuery,那么我就开始讲解怎么做的了，先上html和css的代码

    
    




	

		

			

				电脑数码类产品
			
			

				
笔记本
					

						
笔记本1
						
笔记本1
						
笔记本1
						
笔记本1
					
				

				
移动硬盘
				

						
移动硬盘1
						
移动硬盘1
						
移动硬盘1
						
移动硬盘1
						
					
				
				
电脑软件
				

						
电脑软件1
						
电脑软件1
						
电脑软件1
						
电脑软件1
					
					
				
				
数码产品
					

						
数码产品1
						
数码产品1
						
数码产品1
						
数码产品1
			
					
				

			
		

	

menu.css

@CHARSET "UTF-8";

*{
	margin: 0px;
	padding: 0px;
	
}

ul,li{
	list-style-type: none;
	
}

.menu{
	width: 190px;
	border: 1px red solid;
	background-color: #fffdd2;
}

.optn{
	width: 190px;
	line-height: 28px;
	border-top: 1px red dashed;
	
}


.content{
	padding-top:10px;
	clear: left;
}


a{
	text-decoration: none;
	color: #666;
	padding: 10px;
}
.optnFocus{
	background-color: #fff;
	font-weight: bold;
	
}

div{
	padding: 10px;
}

.tip{
	width: 190px;
	border: 2px red solid;
	position: absolute;
	background-color: #fff;
	display: none;
}

.tip li{
	line-height: 23px;
}

接下来就是主要的jquery代码:menu.js

$(function(){
	
	var curY;//获取所选想的TOP
	var curH;//获取所选的Height
	var curW;//获取所选的width
	var objL;//获取当前对象
	
	//自定义函数用于获取当前位置
	function setInitValue(obj){
		curY=obj.offset().top;
		curH=obj.height();
		curW=obj.width();
	}
	
	//设置当前所选项的鼠标滑动事件
	$(".optn").mouseover(function(){
		objL=$(this);//获取当前对象
		setInitValue(objL);
		var allY=curY-curH +"px";
		
		objL.addClass("optnFocus");
		//获取气元素下的下一个ul
		$(".tip",this).show().css({"top":allY,"left":curW});;
		
	});
	$(".optn").mouseout(function(){
		
		$(this).removeClass("optnFocus");
		$(".tip",this).hide();
		
	});
	
	//为了防止移到子菜单时子菜单不见，我们也要为子菜单设置鼠标事件
	
	$(".tip").mouseover(function(){
		
		$(this).show();
		objL=$(this).prev("li");
		setInitValue(objL);
		objL.addClass("optnFocus");
	});
	
	$(".tip").mouseout(function(){
		$(this).hide();
		$(this).prev("li").removeClass("optnFocus");
		
	});
	
	
});

注意要点：

1.由于我们用的是较高版本的jquery文件库，所以有些方法是不支持的，例如获取下一个元素的第一个子元素next(erp)，在10.1中是不支持的，所以我换了一种方法$(chiled,select),表示在select的范围进行元素的选择

2.整个效果的实现我们还要为子选项框绑定鼠标事件，目的就是为了不在我们移动到子选项卡中，突然消失。

要实现好看的效果就需要加一些图片和样式，不过原理是一样的哦