你的位置:首页 > Java教程

[Java教程]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/