今天我們就帶大家體會一下級聯菜單的顯示，只是實現了簡單的效果，不過大都原理是一樣的
相信初學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.整個效果的實現我們還要為子選項框綁定鼠標事件，目的就是為了不在我們移動到子選項卡中，突然消失。 要實現好看的效果就需要加一些圖片和樣式，不過原理是一樣的哦