快捷導(dǎo)航

jQuery實現(xiàn)的縱向下拉菜單實例詳解【附demo源碼下載】

更新時間：2016年07月09日 11:18:54 作者：丁國華

這篇文章主要介紹了jQuery實現(xiàn)的縱向下拉菜單,結(jié)合實例形式分析了jQuery動態(tài)操作頁面元素實現(xiàn)縱向下拉菜單的步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)的縱向下拉菜單。分享給大家供大家參考，具體如下：

當(dāng)我們?yōu)g覽網(wǎng)頁和使用word編輯一下文字的時候，我們都能看見橫向下拉的身影，有了橫向菜單，我們能對整個界面進行更好的布局，達到我們想要的效果，那么這些橫向菜單式如何用代碼實現(xiàn)的，當(dāng)我們?yōu)g覽或使用的時候她又是如何呈現(xiàn)在我們面前的，學(xué)習(xí)了JQuery之后，小編漸漸看到她美麗的容顏，接下來，小編主要講解如何通過jquery實現(xiàn)縱向下拉菜單。

第一步，我們來編寫html的代碼，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <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>
 <body>
   <ul>
   <li class="main">
    <a href="#">菜單項1</a>
   <ul>
    <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>
 </body>
</html>

我們來看一下運行效果：

上面的實現(xiàn)效果已經(jīng)初步具有了縱向菜單的模型，但是似乎有不完美的地方，主菜單的前面有黑色的小圓點，子菜單前面有白色的小圓點，也沒有立體的效果，不用擔(dān)心css可以幫助我們解決上述的問題，接著，編寫css的代碼，如下所示：

ul,li{
 /*清除ul和li上默認(rèn)的小圓點*/
 list-style:none;
}
ul{
 /*清除子菜單的縮進值*/
 padding:0;
 margin:0;
}
.main{
 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;
 width:100px;
 padding-top:3px;
 padding-bottom:3px;
}
.main a{
 color:white;
 background-image:url(../images/collapsed.gif);
 background-repeat:no-repeat;
 background-position:3px center;
}
.main li a{
  color:black;
  background-image:none;
}
.main ul{
 display:none;
}

添加了css的代碼，在顯示的時候會有怎么樣的驚喜帶給我們呢？

上圖的顯示效果已經(jīng)就更為接近我們的想好實現(xiàn)的效果了，但是這個還是不可以進行點擊的，所以我們還需要編寫js的代碼，相應(yīng)的，在js中我們也要建立兩個文件，一個jquery一個menu，鑒于jquery的代碼較多，所以小編已經(jīng)上傳相關(guān)資源，有需要的小伙伴可以點擊文末鏈接下載，接著，我們來編寫menu的代碼，來給整理頁面添加行為能力，代碼如下：

$(document).ready(function(){
 //頁面中的DOM已經(jīng)裝載完成時，執(zhí)行的代碼
 $(".main > a").click(function(){
  //找到主要菜單項對應(yīng)的子菜單項
  var ulNode =$(this).next("ul");
  /*
  if(ulNode.css("display")=="none")
  {
   ulNode.css("display","block");
  }else{
   ulNode.css("display","none");
  }
  */
  /*菜單出現(xiàn)的動畫效果*/
  ulNode.show("slow");//normal fast
  //unlNode.hide();
  //ulNode.toggle();
  //
  //ulNode.slideDown("slow");
  //ulNode.slideUP;
  ulNode.sildeToggle();
 });
})

添加了js的代碼，現(xiàn)在實現(xiàn)的效果是不是和我們想象的一樣呢，如下圖所示：

以上就是小編實現(xiàn)的縱向下拉菜單的全部過程，既然可以實現(xiàn)縱向下拉菜單，那么橫向下拉菜單又該如何實現(xiàn)呢，更縱向菜單的實現(xiàn)過程有哪些不一樣的地方nie，這個過程才是我們成長的過程，在這里橫向菜單小編就不一一介紹了，完整實例代碼點擊此處本站下載。有需要的小伙伴可以down下來，自己研究。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: