jQuery實現的垂直可伸縮導航菜單:垂直可伸縮導航菜單在網頁中非常的常用，首先可以進行分類，第二個也可以節省網頁的空間，本章節就通過實例代碼分享一個這樣的效果，希望能夠給需要者帶來一定的幫助。代碼實例如下:螞蟻部落 螞蟻部落一 前端教程 ...
jQuery實現的垂直可伸縮導航菜單:
垂直可伸縮導航菜單在網頁中非常的常用，首先可以進行分類，第二個也可以節省網頁的空間，本章節就通過實例代碼分享一個這樣的效果，希望能夠給需要者帶來一定的幫助。
代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0; padding:0; } .navigator{ width:180px; display:block; margin-top:30px; margin-left:30px; border-top:10px solid #ddd; border-bottom:10px solid #ddd; border-left:3px solid #ddd; border-right:3px solid #ddd; background:#ddd; } .tabs{list-style: none;} .tabs li{ clear:both; overflow:auto; } .tabs li h3{ padding:0; margin:0; font-size:14px; height:40px; line-height:40px; text-align:center; width:180px; cursor:pointer; background:#07f; color:#fff; border-bottom:1px solid #ccc; } .tabs li:last-child h3{border:none;} .tabs li h3.current{background:#6af;} .tabs li ul{ margin-left:auto; margin-right:auto; width:160px; height:0px; list-style:none; overflow:hidden; } .tabs li ul li{ height:30px; line-height:30px; background:#eee; padding:5px; border-bottom:1px solid #ccc; cursor:pointer; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".nav1").css("height","160px"); $(".tabs li h3:first").addClass("current"); $(".tabs li h3").click(function(){ $(".tabs li h3").removeClass("current"); $(this).addClass("current"); $(".tabs li ul").animate({height:"0"},"fast"); $(this).next().animate({height:"160"},"slow"); }); }); </script> </head> <body> <div class="navigator"> <ul class="tabs"> <li class="tab1"> <h3>螞蟻部落一</h3> <ul class="nav1"> <li>前端教程</li> <li>前端教程</li> <li>前端教程</li> <li>前端教程</li> </ul> </li> <li class="tab2"> <h3>螞蟻部落二</h3> <ul class="nav2"> <li>前端教程</li> <li>前端教程</li> <li>前端教程</li> <li>前端教程</li> </ul> </li> <li class="tab3"> <h3>螞蟻部落三</h3> <ul class="nav3"> <li>前端教程</li> <li>前端教程</li> <li>前端教程</li> <li>前端教程</li> </ul> </li> </ul> </div> </body> </html>
以上代碼實現了我們的要求，比較簡單這裡就不多介紹了，如有任何問題可以跟帖留言。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10560
更多內容可以參閱:http://www.softwhy.com/jquery/
