AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

jQuery树形下拉菜单特效代码分享

51自学网 http://www.wanshiok.com
jQuery树形下拉菜单,jQuery下拉菜单特效,jQuery树形下拉列表,jQuery树形下菜单

本文实例讲述了jQuery实现幻树形下拉菜单特效,实现自动伸缩,分享给大家供大家参考。

运行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"> 资源库 </div> <div class="menuContent"> <ul>  <li> <a href="#">欢迎访问</a></li>  <li><a href="/"> wanshiok.com </a></li>  <li><a href="/list/index_1.htm"> 网络编程</a></li> </ul> </div> <div class="menuTitle"> 文章模块 </div> <div class="menuContent"> <ul>  <li> <a href="#">前端技术</a></li>  <li> <a href="/list/list_21_1.htm">ASP.NET</a></li>  <li> <a href="/list/index_104.htm">数据库</a></li> </ul> </div> <div class="menuTitle"> 下载模块 </div> <div class="menuContent"> <ul>  <li> <a href="/">wanshiok.com </a></li>  <li> <a href="/codes/">源码下载</a></li>  <li> <a href="/books/">电子书籍</a></li> </ul> </div></div></body></html>

以上就是为大家分享的jQuery树形下拉菜单代码,希望大家可以喜欢。


jQuery树形下拉菜单,jQuery下拉菜单特效,jQuery树形下拉列表,jQuery树形下菜单  
上一篇:js实现点击文本框显示日期选择器特效代码分享  下一篇:Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)