jQuery實現級聯選單效果(仿淘寶首頁選單動畫)_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";

*{
邊距：0px;
內邊距：0px;

}

ul,li{
列表樣式類型：無;

}

.menu{
寬度：190px;
邊框：1px 紅色實心；
；背景顏色：#fffdd2;
}

.optn{
寬度：190px;
行高：28px;
邊框頂部：1px紅色虛線；

}


.content{
padding-top:10px;
清除：左；
}


a{
文字裝飾：無；
顏色：#666；
內邊距：10px；
}
.optnFocus{
背景顏色：#fff;
字體粗細：粗體；

}

div{
內邊距：10px;
}

.tip{
寬度：190px;
邊框：2px 紅色實心；
位置：絕對;
背景顏色：#fff;
顯示：無;
}

.tip li{
行高：23px;
}

接下來是主要的jquery 程式碼：menu.js

複製程式碼

複製程式碼

碼>

$(function(){

var curY;//取得選定想要的TOP
var curH;//取得選取想要的高度
var curW;//取得選定的寬度
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.整個效果的實現我們還要為子選項框綁定滑鼠事件，目的就是為了不在我們移動到子選項卡中，突然消失。

要達到好看的效果就需要加一些圖片和樣式，不過原理是一樣的的哦