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

2019-11-20 09:31:51

字體：大中小

來源：轉載

供稿：網友

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>JQuery實戰-菜單效果</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>

我們來看一下運行效果：

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

ul,li{ /*清除ul和li上默認的小圓點*/ 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的代碼，在顯示的時候會有怎么樣的驚喜帶給我們呢？

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

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

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