<span style="font-family:KaiTi_GB2312;font-size:18px;"><head> 
  <title>JQuery實戰(zhàn)-菜單效果</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <link type="text/css" rel="stylesheet" href="css/menu.css" /> 
  <script type="text/javascript" src="js/jquery.js"></script> 
  <script type="text/javascript" src="js/menu.js"></script> 
</head></span>

body部分編輯菜單項內(nèi)容，通過嵌套的ul和li來表示，菜單最外層為ul，一層每個主菜單放在一個li中。如果有子菜單，在這個主菜單的li中建立新的ul，再依次嵌套就可以構(gòu)建多層的菜單。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><body> 
    <ul> 
      <li class="main"> 
          <a href="#">菜單項1</a> 
        <ul style="display:none;"> 
          <li> 
            <a href="#">子菜單項11</a> 
          </li> 
          <li> 
            <a href="#">子菜單項12</a> 
          </li> 
        </ul> 
      </li> 
      <li class="main"> 
        <a href="#">菜單項2</a> 
        <ul> 
          <li> 
            <a href="#">子菜單項21</a> 
          </li> 
          <li> 
            <a href="#">子菜單項22</a> 
          </li> 
        </ul> 
      </li> 
      <li class="main"> 
        <a href="#">菜單項3</a> 
        <ul> 
          <li> 
          <a href="#">子菜單項31</a> 
          </li> 
          <li> 
            <a href="#">子菜單項32</a> 
          </li> 
        </ul> 
      </li> 
    </ul> 
     
    <br/> 
    <ul> 
      <li class="hmain"> 
        <a href="#">菜單項1</a> 
        <ul> 
          <li> 
            <a href="#">子菜單項11</a> 
          </li> 
          <li> 
            <a href="#">子菜單項12</a> 
          </li> 
        </ul> 
      </li> 
      <li class="hmain"> 
        <a href="#">菜單項2</a> 
        <ul> 
          <li> 
            <a href="#">子菜單項21</a> 
          </li> 
          <li> 
            <a href="#">子菜單項22</a> 
          </li> 
        </ul> 
      </li> 
      <li class="hmain"> 
        <a href="#">菜單項3</a> 
        <ul> 
          <li> 
          <a href="#">子菜單項31</a> 
          </li> 
          <li> 
            <a href="#">子菜單項32</a> 
          </li> 
        </ul> 
      </li> 
    </ul> 
     
  </body></span>

css代碼部分
1.瀏覽器中的ul和li元素默認(rèn)情況下文字前都有圓點標(biāo)識符，li元素會有縮進(jìn)
2.list-style屬性值為none,可清除ul和li前面的小圓點。
3.清除縮進(jìn)值，padding和margin都為0，其中IE6 IE7需要把margin為0的時候才可以清除縮進(jìn)值。

<span style="font-family:KaiTi_GB2312;font-size:18px;">ul,li{ 
  list-style:none;/* //清除ul和li上默認(rèn)的小圓點 */ 
 
} 
ul{ 
  /* 清除子菜單的縮進(jìn)值 */ 
  padding:0; 
  margin:0; 
} 
.main,.hmain{ 
  background-image:url(../images/title.gif);/*指定背景圖*/ 
  background-repeat:repeat-x; 
  width:120px; 
} 
li{ 
  background-color:#EEEEEE; 
} 
a { 
  /*取消所有的下劃線*/ 
  text-decoration:none; 
  padding-left:20px;  
   display:block; 
  display:inline-block;/* 解決ie6不兼容的問題 */  
  width:100px; 
  padding-top:3px; 
  padding-bottom:3px; 
} 
.main a,.hmain a { 
  color:white;/*主菜單標(biāo)簽顏色為白色*/ 
  background-image:url(../images/collapsed.gif); 
  background-repeat:no-repeat; 
  background-position:3px center; /* 圖片位置在中間 */ 
} 
.main li a ,.hmain li a{ 
  /* 子菜單項 */ 
  color:black; 
  background-image:none;/* 不使用圖片 */ 
  padding-left:18px;  
   
} 
.main ul,.hmain ul{ 
  /* 子菜單隱藏 */ 
   display:none;  
} 
.hmain{ 
  float:left;/*浮動顯示*/ 
  margin:1px; 
}</span>

menu.js代碼：
1.main a選擇使用了.main這個class的元素內(nèi)部所有的a節(jié)點
2.main>a選擇.main子節(jié)點中的a節(jié)點

<span style="font-family:KaiTi_GB2312;font-size:18px;">$(document).ready(function(){ 
  //頁面的Dom已經(jīng)裝載完成時，執(zhí)行的代碼 
   $(".main > a,.hmain a").click(function(){ 
     //找到主菜單項對應(yīng)的子菜單項 
    var ulNode = $(this).next("ul"); 
    // //根據(jù)情況收縮菜單 
    // if(ulNode=$.css("display") == "none"){ 
      // ulNode.css("display","block"); 
    // }else{ 
      // ulNode.css("display","none"); 
    // } 
     
    // ulNode.show("normal");//設(shè)置展開的速度，可以是nomal,slow,fast 
    // ulNode.hide(); 
     // ulNode.toggle();//toggle設(shè)置展開或者收縮 
    //卷簾效果，向上或者向下 
    // ulNode.slideDown(); 
    // ulNode.slideUp; 
    ulNode.slideToggle(); 
  }); 
  //麻煩的方法 
  // $(".hmain > a").hover(function(){ 
    // $(this).next("ul").slideDown(); 
  // }.Function(){ 
    // var ulNode=$(this).next("ul"); 
    // var timeoutId =setTimeout(function(){ 
     
// })     
      // ulNode.slideUp(); 
  // },300); 
  // ulNode.hover(function(){ 
    // clearTimeout(timeoutId); 
  // }.function(){ 
    // $(this).slideUp(); 
  // }); 
 
  /********實現(xiàn)鼠標(biāo)移動到指定主菜單后子菜單自動顯示*****/ 
   
  $(".hmain").hover(function(){ 
    $(this).children("ul").slideDown(); 
  },function(){ 
    $(this).children("ul").slideUp(); 
  }); 
   
}); 
  /* 
  *修改主菜單的指示圖標(biāo)隨著子菜單的變化而變化 
  * 
  */ 
function changeIcon(mainNode) { 
  if (mainNode) { 
    if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) { 
      mainNode.css("background-image","url('images/expanded.gif')"); 
    } else { 
      mainNode.css("background-image","url('images/collapsed.gif')"); 
    } 
  } 
} 
</span>

以上就是本文的全部內(nèi)容，希望能夠幫助大家更好的實現(xiàn)制作菜單效果。

您可能感興趣的文章: