快捷導(dǎo)航

jQuery實現(xiàn)級聯(lián)菜單效果(仿淘寶首頁菜單動畫)

更新時間：2014年04月10日 16:35:10 作者：

今天我們就帶大家體會一下級聯(lián)菜單的顯示，只是實現(xiàn)了簡單的效果，不過大都原理是一樣的

相信初學(xué)HTM+DIV+CSSl的同學(xué)們肯定也想做出淘寶網(wǎng)首頁的菜單動畫吧。今天我們就帶大家體會一下級聯(lián)菜單的顯示。小編我只是實現(xiàn)了簡單地效果，不過總體來說原理是一樣的哦，那么先讓大家看看效果圖吧。

那么要實現(xiàn)這個效果我們當(dāng)然要使用到的是jQuery,那么我就開始講解怎么做的了，先上html和css的代碼

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<title>menu.html</title> 

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<link rel="stylesheet" type="text/css" href="../css/menu.css"> 
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="../js/menu.js"></script> 

</head> 

<body> 
<ul> 
<li class="menu"> 
<div class="title"> 
<span>電腦數(shù)碼類產(chǎn)品</span> 
</div> 
<ul class="content"> 
<li class="optn"><a href="#">筆記本</a> 
<ul class="tip"> 
<li><a href="#">筆記本1</a></li> 
<li><a href="#">筆記本1</a></li> 
<li><a href="#">筆記本1</a></li> 
<li><a href="#">筆記本1</a></li> 
</ul> 
</li> 

<li class="optn"><a href="#">移動硬盤</a> 
<ul class="tip"> 
<li><a href="#">移動硬盤1</a></li> 
<li><a href="#">移動硬盤1</a></li> 
<li><a href="#">移動硬盤1</a></li> 
<li><a href="#">移動硬盤1</a></li> 

</ul> 
</li> 
<li class="optn"><a href="#">電腦軟件</a> 
<ul class="tip"> 
<li><a href="#">電腦軟件1</a></li> 
<li><a href="#">電腦軟件1</a></li> 
<li><a href="#">電腦軟件1</a></li> 
<li><a href="#">電腦軟件1</a></li> 

</ul> 
</li> 
<li class="optn"><a href="#">數(shù)碼產(chǎn)品</a> 
<ul class="tip"> 
<li><a href="#">數(shù)碼產(chǎn)品1</a></li> 
<li><a href="#">數(shù)碼產(chǎn)品1</a></li> 
<li><a href="#">數(shù)碼產(chǎn)品1</a></li> 
<li><a href="#">數(shù)碼產(chǎn)品1</a></li> 
</ul> 
</li> 

</ul> 
</li> 

</ul> 
</body> 
</html> 

menu.css

復(fù)制代碼代碼如下:

 
@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

復(fù)制代碼代碼如下:

 
$(function(){ 

var curY;//獲取所選想的TOP 
var curH;//獲取所選的Height 
var curW;//獲取所選的width 
var objL;//獲取當(dāng)前對象 

//自定義函數(shù)用于獲取當(dāng)前位置 
function setInitValue(obj){ 
curY=obj.offset().top; 
curH=obj.height(); 
curW=obj.width(); 
} 

//設(shè)置當(dāng)前所選項的鼠標(biāo)滑動事件 
$(".optn").mouseover(function(){ 
objL=$(this);//獲取當(dāng)前對象 
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(); 

}); 

//為了防止移到子菜單時子菜單不見，我們也要為子菜單設(shè)置鼠標(biāo)事件 

$(".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的范圍進(jìn)行元素的選擇

2.整個效果的實現(xiàn)我們還要為子選項框綁定鼠標(biāo)事件，目的就是為了不在我們移動到子選項卡中，突然消失。

要實現(xiàn)好看的效果就需要加一些圖片和樣式，不過原理是一樣的哦

您可能感興趣的文章: