快捷導(dǎo)航

jQuery樹形下拉菜單特效代碼分享

更新時(shí)間：2015年08月15日 15:38:31 投稿：lijiao

這篇文章主要介紹了jQuery實(shí)現(xiàn)幻樹形下拉菜單特效，代碼簡(jiǎn)單，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)幻樹形下拉菜單特效，實(shí)現(xiàn)自動(dòng)伸縮，分享給大家供大家參考。

運(yùn)行jQuery樹形下拉菜單特效效果圖：

為大家分享的jQuery樹形下拉菜單代碼如下

<head>

<title>常用的jquery下拉菜單</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
 $(document).ready(
 function() 
 {
 $(".menuTitle").click(function(){
  $(this).next("div").slideToggle("slow")
  .siblings(".menuContent:visible").slideUp("slow");
  $(this).toggleClass("activeTitle");
  $(this).siblings(".activeTitle").removeClass("activeTitle");
 });
 });
 
</script>
<style type="text/css">
 body
 {
 margin:0;background-color:#9ad075;
 }
 .container
 {
 width:100%; text-align:center;
 }
 .menuTitle
 {
 width:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
 }
 .activeTitle
 {
 width:148px; height:25px; background-image:url(images/fold.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
 }
 .menuContent
 {
 background-color:#fff; margin:0 auto; height:auto; width:148px; text-align:left; display:none;
 }
 li
 {
  background:url(images/arr.gif) no-repeat 20px 6px ; list-style-type:none;padding:0px 0px 0px 38px; font-size:12.7px; height:20px; line-height:20px;
 }
 ul
 {
 margin:0;padding:0;
 }
</style>
</head>
<body>
<div class="container">
 <div class="menuTitle">
 資源庫(kù)
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="#">歡迎訪問</a></li>
  <li><a href="http://www.fzitv.net/"> 腳本之家 </a></li>
  <li><a href="http://www.fzitv.net/list/index_1.htm"> 網(wǎng)絡(luò)編程</a></li>
 </ul>
 </div>
 <div class="menuTitle">
 文章模塊
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="#">前端技術(shù)</a></li>
  <li> <a href="http://www.fzitv.net/list/list_21_1.htm">ASP.NET</a></li>
  <li> <a href="http://www.fzitv.net/list/index_104.htm">數(shù)據(jù)庫(kù)</a></li>
 </ul>
 </div>
 <div class="menuTitle">
 下載模塊
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="http://www.fzitv.net/">腳本之家 </a></li>
  <li> <a href="http://www.fzitv.net/codes/">源碼下載</a></li>
  <li> <a href="http://www.fzitv.net/books/">電子書籍</a></li>
 </ul>
 </div>
</div>


</body>
</html>

以上就是為大家分享的jQuery樹形下拉菜單代碼，希望大家可以喜歡。

您可能感興趣的文章: