快捷導(dǎo)航

JQuery菜單效果的兩個(gè)實(shí)例講解（3）

更新時(shí)間：2015年09月17日 15:09:10 投稿：lijiao

本文跟大家分享了兩個(gè)Jquery菜單效果，各有各的特色，希望大家都會(huì)喜歡，并且能夠熟練掌握，感興趣的小伙伴們可以參考一下

最終要達(dá)到的效果是如圖所示：

當(dāng)單擊菜單項(xiàng)的時(shí)候，可以實(shí)現(xiàn)菜單的折疊與展開，這是我們?cè)诰W(wǎng)頁上經(jīng)?？吹降囊粋€(gè)效果。在這里的實(shí)現(xiàn)主要應(yīng)用是CSS控制樣式然后配合jquery實(shí)現(xiàn)。
自己的感想：這里比如說綁定要跳轉(zhuǎn)的頁面，只是靜態(tài)的綁定，不能動(dòng)態(tài)的綁定，我在開發(fā)過程中用到的動(dòng)態(tài)綁定是結(jié)合asp.net的treeview控件實(shí)現(xiàn)的。不知道大家還有沒有更好的辦法。
前臺(tái)頁面代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="menu.aspx.cs" Inherits="menu" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
 <title></title> 
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 
 <script src="js/menu.js" type="text/javascript"></script> 
 <link href="css/menu.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <div> 
  <ul> 
   <li class="main"> 
    <a href="#">菜單項(xiàng)1</a> 
    <ul> 
     <li><a href="#">子菜單11</a></li> 
     <li><a href="#">子菜單12</a></li>      
    </ul>    
   </li> 
   <li class="main"> 
    <a href="#">菜單項(xiàng)2</a> 
    <ul> 
     <li><a href="#">子菜單21</a></li> 
     <li><a href="#">子菜單22</a></li> 
    </ul> 
   </li> 
   <li class="main"> 
    <a href="#">菜單項(xiàng)3</a> 
    <ul> 
     <li><a href="#">子菜單31</a></li> 
     <li><a href="#">子菜單32</a></li> 
    </ul> 
   </li> 
  </ul> 
 </div> 
 </form> 
</body> 
</html>

CSS（menu.css）

ul,li 
{ 
 list-style-type:none; 
 /*如果不加margin在搜狗瀏覽器中不能左對(duì)齊*/ 
 margin:0px;  
 padding:0px; 
 } 
.main 
{ 
 background-image: url("../images/title.gif"); 
 background-repeat:repeat-x; 
 width:100px; 
 } 
.main a 
{ 
 background-image:url("../images/collapsed.gif"); 
 background-repeat:no-repeat; 
 background-position:3px center; 
 text-decoration:none; 
 color:White; 
 /*下面是用來保證鼠標(biāo)只要停留在li上就可以響應(yīng)，也就相當(dāng)于讓li的響應(yīng)區(qū)域擴(kuò)充了*/ 
 display:block; 
 padding-left:20px; 
 padding-bottom:3px; 
 } 
li 
{ 
 background-color:#EEEEEE; 
 } 
.main li a 
{ 
 color:Black; 
 background-image:none; 
 }

menu.js:

/// <reference path="jquery-1.9.1.min.js" /> 
$(document).ready(function () { 
 var main = $(".main>a"); 
 main.click(function () { 
  var ulNode = $(this).next("ul"); 
  //  if (ulNode.css("display") == "none") { 
  //   ulNode.css("display", "block"); 
  //  } 
  //  else { 
  //   ulNode.css("display", "none");    
  //  } 
 
  //百葉窗的效果 
  ulNode.slideToggle("normal"); 
 }); 
});

這個(gè)例子是上一個(gè)例子的延續(xù)，我們先來看一下最終我們要達(dá)到的效果：

這次我們要實(shí)現(xiàn)的是下面的效果，當(dāng)鼠標(biāo)滑動(dòng)到菜單項(xiàng)的時(shí)候，子菜單顯示；當(dāng)鼠標(biāo)移開的時(shí)候，菜單收起。
在這里，我們還解決了在滑動(dòng)門會(huì)有的問題，就是當(dāng)鼠標(biāo)快速滑動(dòng)的時(shí)候，會(huì)不停地觸發(fā)，這個(gè)問題。

頁面的代碼如下：

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="menu.aspx.cs" Inherits="menu" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
 <title></title> 
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 
 <script src="js/menu.js" type="text/javascript"></script> 
 <link href="css/menu.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <div> 
  <ul> 
   <li class="main"> 
    <a href="#">菜單項(xiàng)1</a> 
    <ul> 
     <li><a href="#">子菜單11</a></li> 
     <li><a href="#">子菜單12</a></li>      
    </ul>    
   </li> 
   <li class="main"> 
    <a href="#">菜單項(xiàng)2</a> 
    <ul> 
     <li><a href="#">子菜單21</a></li> 
     <li><a href="#">子菜單22</a></li> 
    </ul> 
   </li> 
   <li class="main"> 
    <a href="#">菜單項(xiàng)3</a> 
    <ul> 
     <li><a href="#">子菜單31</a></li> 
     <li><a href="#">子菜單32</a></li> 
    </ul> 
   </li> 
  </ul> 
 </div> 
 
 <div style=" margin-top:50px;"> 
  <ul> 
   <li class="hmain"> 
    <a href="#">菜單項(xiàng)1</a> 
    <ul> 
     <li><a href="#">子菜單11</a></li> 
     <li><a href="#">子菜單12</a></li>      
    </ul>    
   </li> 
   <li class="hmain"> 
    <a href="#">菜單項(xiàng)2</a> 
    <ul> 
     <li><a href="#">子菜單21</a></li> 
     <li><a href="#">子菜單22</a></li> 
    </ul> 
   </li> 
   <li class="hmain"> 
    <a href="#">菜單項(xiàng)3</a> 
    <ul> 
     <li><a href="#">子菜單31</a></li> 
     <li><a href="#">子菜單32</a></li> 
    </ul> 
   </li> 
  </ul> 
 </div> 
 </form> 
</body> 
</html>

CSS(menu.css)

ul,li 
{ 
 list-style-type:none; 
 /*如果不加margin在搜狗瀏覽器中不能左對(duì)齊*/ 
 margin:0px;  
 padding:0px; 
 } 
.main,.hmain 
{ 
 background-image: url("../images/title.gif"); 
 background-repeat:repeat-x; 
 width:100px; 
 } 
.main a,.hmain a 
{ 
 background-image:url("../images/collapsed.gif"); 
 background-repeat:no-repeat; 
 background-position:3px center; 
 text-decoration:none; 
 color:White; 
 /*下面是用來保證鼠標(biāo)只要停留在li上就可以響應(yīng)，也就相當(dāng)于讓li的響應(yīng)區(qū)域擴(kuò)充了*/ 
 display:block; 
 padding-left:20px; 
 padding-bottom:3px; 
 } 
li 
{ 
 background-color:#EEEEEE; 
 } 
.main li a,.hmain li a 
{ 
 color:Black; 
 background-image:none; 
 } 
.main ul,.hmain ul 
{ 
 display:none; 
 } 
/*橫向菜單的樣式*/ 
.hmain 
{ 
 float:left; 
 }

menu.js

/// <reference path="jquery-1.9.1.min.js" /> 
$(document).ready(function () { 
 var main = $(".main>a"); 
 main.click(function () { 
  var ulNode = $(this).next("ul"); 
  //  if (ulNode.css("display") == "none") { 
  //   ulNode.css("display", "block"); 
  //  } 
  //  else { 
  //   ulNode.css("display", "none");    
  //  } 
 
  //百葉窗的效果 
  ulNode.slideToggle("normal"); 
 }); 
 
 //現(xiàn)在的這個(gè)變量用來解決鼠標(biāo)快速滑動(dòng)問題clearInterval(setTimeoutId); nodeLi.children("ul").slideUp(); 
 var setTimeoutId; 
 $(".hmain").hover(function () { 
  var nodeLi = $(this); 
  setTimeoutId = window.setTimeout(function () { nodeLi.children("ul").slideDown(); }, 300) 
 }, 
 //上面的函數(shù)是鼠標(biāo)進(jìn)入的操作，下面的操作是鼠標(biāo)移出的操作。 
  function () { 
   //開始的時(shí)候，我在這里犯了一個(gè)錯(cuò)誤，應(yīng)該重新定義一下nodeLi 
   var nodeLi = $(this); 
   clearTimeout(setTimeoutId); 
   if (nodeLi.children("ul").length != 0) { 
    nodeLi.children("ul").slideUp(); 
   }; 
  }); 
});

以上兩種菜單效果，大家有沒有掌握，希望這篇文章可以幫助到大家。

您可能感興趣的文章: