快捷導(dǎo)航

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

更新時(shí)間：2016年07月09日 11:18:54 作者：丁國(guó)華

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

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

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

第一步，我們來(lái)編寫(xiě)html的代碼，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>JQuery實(shí)戰(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="#">菜單項(xiàng)1</a>
   <ul>
    <li>
     <a href="#">子菜單項(xiàng)11</a>
    </li>
    <li>
     <a href="#">子菜單項(xiàng)12</a>
    </li>
   </ul>
   </li>
   <li class="main">
   <a href="#">菜單項(xiàng)2</a>
   <ul>
    <li>
     <a href="#">子菜單項(xiàng)21</a>
    </li>
    <li>
     <a href="#">子菜單項(xiàng)22</a>
    </li>
   </ul>
   </li>
   <li class="main">
   <a href="#">菜單項(xiàng)3</a>
   <ul>
    <li>
     <a href="#">子菜單項(xiàng)31</a>
    </li>
    <li>
     <a href="#">子菜單項(xiàng)32</a>
    </li>
   </ul>
   </li>
   </ul>
 </body>
</html>

我們來(lái)看一下運(yùn)行效果：

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

ul,li{
 /*清除ul和li上默認(rèn)的小圓點(diǎn)*/
 list-style:none;
}
ul{
 /*清除子菜單的縮進(jìn)值*/
 padding:0;
 margin:0;
}
.main{
 background-image:url(../images/title.gif);
 background-repeat:repeat-x;
 width:120px;
}
li{
 background-color:#EEEEEE;
}
a{
 /*取消所有的下劃線(xiàn)*/
 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的代碼，在顯示的時(shí)候會(huì)有怎么樣的驚喜帶給我們呢？

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

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

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

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

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

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

您可能感興趣的文章: