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="http://www.jb51.net/"> 我们 </a></li>
  <li><a href="http://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="http://www.jb51.net/list/list_21_1.htm">ASP.NET</a></li>
  <li> <a href="http://www.jb51.net/list/index_104.htm">数据库</a></li>
 </ul>
 </div>
 <div class="menuTitle">
 下载模块
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="http://www.jb51.net/">我们 </a></li>
  <li> <a href="http://www.jb51.net/codes/">源码下载</a></li>
  <li> <a href="http://www.jb51.net/books/">电子书籍</a></li>
 </ul>
 </div>
</div>

</body>
</html>

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

赞 (0)

相关推荐

  • jQuery 无限级菜单的简单实例

    我将CSS完全分离出来用jQuery附加式样,就是为了多级染色,并且生成目录树和控制式样也很容易,生成时也不需要考虑式样.数据表建议用事先Order排序的方式,不要读取数据的时候才分级排序,这样性能会较佳. 我把它做成了个.Net的控件,作为轻量级的无限目录树,还是相当好用的.只是还不完善,我先慢慢修改,等差不多了再发布出来. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu

  • jquery 无限级下拉菜单的简单实现代码

    jquery 无限级下拉菜单的简单实现代码

    本例子使用json数据,拼接ul和li来实现的效果图: 1.准备json数据: 复制代码 代码如下: var menuData = [            {id:0,pid:-1,name:"订购产品",url:"",children:[                {id:1,pid:0,name:"电脑配件",url:"http://www.jb51.net",children:[                  

  • json+jQuery实现的无限级树形菜单效果代码

    json+jQuery实现的无限级树形菜单效果代码

    本文实例讲述了json+jQuery实现的无限级树形菜单效果代码.分享给大家供大家参考.具体如下: 这里演示json树形菜单,JS无级树树形菜单,引入了jQuery插件,使用递归实现获取无级树数据并生成DOM结构,可以在JSON数据里 扩展无限级 看结构就明白. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-json-tree-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • 基于jquery实现的树形菜单效果代码

    基于jquery实现的树形菜单效果代码

    本文实例讲述了基于jquery实现的树形菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的树形菜单代码,点击菜单项可以向下滑出对应的二级菜单,效果流畅自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • 基于jquery实现无限级树形菜单

    基于jquery实现无限级树形菜单

    本文实例为大家分享了基于jquery实现无限级树形菜单效果,具有一定的参考价值,具体内容如下 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无限级树形菜单</title> </head> <script src="jque

  • jquery实现无限分级横向导航菜单的方法

    本文实例讲述了jquery实现无限分级横向导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 1. jquery插件版本代码如下: 复制代码 代码如下: (function($){     $.fn.extend({         droplinemenu: function(configs) {             var configs = $.extend({                                over: 200,                 o

  • jquery+CSS实现的多级竖向展开树形TRee菜单效果

    jquery+CSS实现的多级竖向展开树形TRee菜单效果

    本文实例讲述了jquery+CSS实现的多级竖向展开树形TRee菜单效果.分享给大家供大家参考.具体如下: 这里演示垂直的树形菜单,应用CSS和jquery技术来实现,显示在网页左侧比较合适,考虑到简洁,没有使用图片之类的作修饰.本效果兼容IE.火狐等主流浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-nlevel-vshow-tree-codes/ 具体代码如下: <!DOCTYPE html> <hea

  • 轻松学习jQuery插件EasyUI EasyUI创建树形菜单

    轻松学习jQuery插件EasyUI EasyUI创建树形菜单

    一.EasyUI使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 <ul> 元素中.无序列表的 <ul> 元素提供一个基础的树(Tree)结构.每一个 <li> 元素将产生一个树节点,子 <ul> 元素将产生一个父树节点. 创建树形菜单(Tree) <ul class="easyui-tree"> <li> <span>Folder</s

  • 使用jquery菜单插件HoverTree仿京东无限级菜单

    使用jquery菜单插件HoverTree仿京东无限级菜单

    效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list.html?cat=9987,653,655 看看左上的菜单.当然这个HoverTree菜单的功能更加强大,可以实现无限级菜单. HTML代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>HoverTree - jquery菜单插件</title> <base t

  • jquery 无限级联菜单案例分享

    看到phpcms的地区级联菜单,感觉写的挺有意思,就说说大致步骤,省得忘了. 对于地区级联菜单的生成一般是在/data/cache_model/content_form.class.php文件的areaid()函数中.不过,这个只是一个cache至于什么地方生成还不没找到,所以暂时作为一个测试.(知道的同学告诉我哈!十分感谢) 在areaid()的$js中添加 复制代码 代码如下: function delChild(num) { $('#load_$field select').each(fu

随机推荐