转自：http://keleyi.com/dev/3068696139522ae4.htm

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery树形导航菜单插件制作滑动多级二级下拉菜单展示 www.keleyi.com</title>

<meta name="description" content="jquery树形导航菜单插件制作一个类似树形展示的slider滑动多级二级下拉菜单目录，支持无限嵌套。jquery插件,jquery下载。" />

<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jtree/jquery.tree.js"></script>

<script type="text/javascript">

$(function () {

$('#files').tree({

expanded: 'li:first'

});

});

</script><style type="text/css">

*{margin:0;padding:0;list-style-type:none;font-size:12px;}

a,img{border:0;}

#files{margin:100px auto;width:400px;}

.tree,.tree ul,.tree li{list-style:none;margin:0;padding:0;zoom: 1;}

.tree ul{margin-left:8px;}

.tree li a{color:#555;padding:.1em 7px .1em 27px;display:block;text-decoration:none;border:1px dashed #fff;background:url(file.gif) 5px 50% no-repeat;}

.tree li a.tree-parent{background:url(http://keleyi.com/keleyi/phtml/jtree/icon-folder-open.gif) 5px 50% no-repeat;}

.tree li a.tree-parent-collapsed{background:url(http://keleyi.com/keleyi/phtml/jtree/icon-folder.gif) 5px 50% no-repeat;}

.tree li a:hover,.tree li a.tree-parent:hover,.tree li a:focus,.tree li a.tree-parent:focus,.tree li a.tree-item-active{color:#000;border:1px solid#eee;background-color:#fafafa;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}

.tree li a:focus,.tree li a.tree-parent:focus,.tree li a.tree-item-active{border:1px solid #e2f3fb;background-color:#f2fafd;}

.tree ul.tree-group-collapsed{display:none;}

</style>

</head>

<body>

<div >

<ul id="files" class="tree">

<li><a href="javascript:void(0);">jquery 特效</a>

<ul class="tree">

<li><a href="javascript:void(0);">jquery图片特效</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="jquery图片切换">jquery图片切换</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery幻灯片">jquery幻灯片</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery图片滚动">jquery图片滚动</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery图片放大镜">jquery图片放大镜</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery广告">jquery广告</a></li>

</ul>

</li>

<li><a href="javascript:void(0);">jquery导航菜单</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="jquery动画菜单">jquery动画菜单</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery树形菜单">jquery树形菜单</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery下拉菜单">jquery下拉菜单</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery右键菜单">jquery右键菜单</a></li>

</ul>

</li>

<li><a href="javascript:void(0);">jquery选项卡特效</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="jquery选项卡切换">jquery选项卡切换</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery滑动选项卡">jquery滑动选项卡</a></li>

</ul>

</li>

<li><a href="javascript:void(0);">jquery文字特效</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="jquery文字滚动">jquery文字滚动</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery文字闪烁">jquery文字闪烁</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery文字切换">jquery文字切换</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery文字数量">jquery文字数量</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery文字改变">jquery文字改变</a></li>

</ul>

</li>

<li><a href="javascript:void(0);">jquery表单特效</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="jquery表单验证">jquery表单验证</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery表单美化">jquery表单美化</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery搜索提示">jquery搜索提示</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery搜索提示">jquery搜索提示</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery全选反选">jquery全选反选</a></li>

</ul>

</li>

<li><a href="javascript:void(0);">jquery表格特效</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="jquery图表插件">jquery图表插件</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery表格排序">jquery表格排序</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery表格排序">jquery表格排序</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="jquery表格变色">jquery表格变色</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="javascript:void(0);">js特效</a>

<ul class="tree">

<li><a href="javascript:void(0);">js图片特效</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="js图片切换">js图片切换</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js幻灯片">js幻灯片</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js图片滚动">js图片滚动</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js图片放大镜">js图片放大镜</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js广告">js广告</a></li>

</ul>

</li>

<li><a href="javascript:void(0);">js导航菜单</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="js动画菜单">js动画菜单</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js树形菜单">js树形菜单</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js下拉菜单">js下拉菜单</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js右键菜单">js右键菜单</a></li>

</ul>

</li>

<li><a href="javascript:void(0);">js选项卡特效</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="js选项卡切换">js选项卡切换</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js滑动选项卡">js滑动选项卡</a></li>

</ul>

</li>

<li><a href="javascript:void(0);">js文字特效</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="js文字滚动">js文字滚动</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js文字闪烁">js文字闪烁</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js文字切换">js文字切换</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js文字数量">js文字数量</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js文字改变">js文字改变</a></li>

</ul>

</li>

<li><a href="javascript:void(0);">js表单特效</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="js表单验证">js表单验证</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js表单美化">js表单美化</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js搜索提示">js搜索提示</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js搜索提示">js搜索提示</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js全选反选">js全选反选</a></li>

</ul>

</li>

<li><a href="javascript:void(0);">js表格特效</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="js图表插件">js图表插件</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js表格排序">js表格排序</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="js表格排序">js表格排序</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="keleyi.com">柯乐义</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="javascript:void(0);">flash特效</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="flash图片特效">flash图片特效</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="flash导航菜单">flash导航菜单</a></li>

</ul>

</li>

<li><a href="javascript:void(0);">div+css教程</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="div+css布局">div+css布局</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="www.keleyi.com">柯乐义</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="css3教程">css3教程</a></li>

</ul>

</li>

<li><a href="javascript:void(0);">html5教程</a>

<ul class="tree">

<li><a href="http://keleyi.com/" target="_blank" title="柯乐义">www.keleyi.com</a></li>

<li><a href="http://keleyi.com/" target="_blank" title="html5图表">html5图表</a></li>

</ul>

</li>

</ul></div>

</body>

</html>
 

jquery树形菜单的更多相关文章

  1. jQuery 树形菜单

    树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...

  2. jQuery树形菜单(1)jquery.treeview

    jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...

  3. jquery树形菜单完整代码

    本实例实现了树形的动态菜单,兼容IE8,火狐,Chrome等浏览器.使用了jQuery的toggle() 方法.效果和代码如下: <!DOCTYPE html PUBLIC "-//W ...

  4. jquery树形菜单插件treeView

    Jquery的treeview很好用,如果是简单的树形菜单按照下面的源码实例模仿就可以. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  5. jQuery树形菜单，使用zTree插件,异步载入 &amp; 编辑功能&amp;Check 共存

    一.下载zTree插件 地址:http://www.ztree.me 二.HTML代码 <%@ Page Language="C#" AutoEventWireup=&quo ...

  6. Bootstrap风格zTree树形菜单插件

    这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...

  7. 一个基于jQuery的简单树形菜单

    在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...

  8. jquery 树形导航菜单无限级

    转自:http://www.jb51.net/article/71615.htm 侵删<!DOCTYPE html> <html lang="en"> &l ...

  9. 雷林鹏分享：jQuery EasyUI 树形菜单 - 使用标记创建树形菜单

    jQuery EasyUI 树形菜单 - 使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 元素中.无序列表的 元素提供一个基础的树(Tre ...

随机推荐

  1. elipse快捷键大全 elipse快捷键详解

    1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.xm ...

  2. 蜜果私塾：informix数据库学习合集[不断补充]

    一.infomix使用备忘录     目录结构:     1. 启动与停止命令:      2. 修改数据库编码:      3. 查看informix占用的端口:      4. 使用dbacces ...

  3. Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制

    Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制 1. 语法错误(ERROR)和运行期错误(Exception) 1 2. 错误类型判断 ...

  4. lua文件读写

    lua里的文件读写模型来自C语言,分为完整模型(和C一样).简单模型. 1.简单模型 io.input([file])  设置默认的输入文件,file为文件名(此时会以文本读入)或文件句柄(可以理解为 ...

  5. 学习PHP垃圾回收机制了解引用计数器的概念

    php变量存在一个叫"zval"的变量容器中,"zval"变量容器包括含变量的类型和值,还包括额外的两个字节信息,分别是“is_ref”表示变量是否属于引用,“ ...

  6. libcurl库的编译

    终于弄懂了libcurl库的编译,记下来免得忘记. 下载地址:   libcurl库:http://curl.haxx.se/latest.cgi?curl=zip   openssl安装包:http ...

  7. Trie树 + DFS - CSU 1457 Boggle

    Boggle Problem's Link: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1457 Mean: 给定n个串,有m个询问. 每个询问 ...

  8. CSS3制作文字半透明倒影效果

      效果如图.Ps.背景线条是背景图勒,和本文效果无关... html代码如下: <div class="content"> <h3 title="专业 ...

  9. 关于Cocos2d-x中两个场景之间参数的传递

    两个场景之间,有的时候要进行参数传递,如果想通过实例化出一个场景,从而得到属性和方法是不对的想法 你有两个场景,第一场景是用户登录界面,第二场景则是你登录后的界面,你如何将用户登录的值传到第二个场景呢 ...

  10. Instant Run requires 'Tools | Android | Enable ADB integration' to be enabled.

    更新了最新的Android Studio预览版之后,运行程序.发现弹出了一个Error Instant Run requires 'Tools | Android | Enable ADB integ ...