您的位置：首页 > Web前端 > JQuery

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

2015-08-15 15:38 951 查看

本文实例讲述了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="//www.jb51.net/"> 脚本之家 </a></li>
<li><a href="//www.jb51.net/list/index_1.htm"> 网络编程</a></li>
</ul>
</div>
<div class="menuTitle">
文章模块
</div>
<div class="menuContent">
<ul>
<li> <a href="#">前端技术</a></li>
<li> <a href="//www.jb51.net/list/list_21_1.htm">ASP.NET</a></li>
<li> <a href="//www.jb51.net/list/index_104.htm">数据库</a></li>
</ul>
</div>
<div class="menuTitle">
下载模块
</div>
<div class="menuContent">
<ul>
<li> <a href="//www.jb51.net/">脚本之家 </a></li>
<li> <a href="//www.jb51.net/codes/">源码下载</a></li>
<li> <a href="//www.jb51.net/books/">电子书籍</a></li>
</ul>
</div>
</div>
</body>
</html>

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery 下拉菜单

相关文章推荐

新的分享

章节导航