相信初學HTM+DIV+CSSl的同學們肯定也想做出淘寶網首頁的菜單動畫吧。今天我們就帶大家體會一下級聯菜單的顯示。小編我只是實現了簡單地效果，不過總體來說原理是一樣的哦，那麼先讓大家看看效果圖吧。
那麼要實現這個效果我們當然要使用到的是jQuery,那麼我就開始講解怎麼做的了，先上html和css的代碼
. 代碼如下:
<!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>電腦數碼類產品</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="#">數碼產品</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>
</ul>
</li>
</ul>
</body>
</html>
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.整個效果的實現我們還要為子選項框綁定鼠標事件，目的就是為了不在我們移動到子選項卡中，突然消失。
要實現好看的效果就需要加一些圖片和樣式，不過原理是一樣的哦