转自：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. 老生常谈combobox和combotree模糊查询

    FIRST /** * combobox和combotree模糊查询 * combotree 结果显示两级父节点(手动设置数量) * 键盘上下键选择叶子节点 * 键盘回车键设置文本的值 */ (fun ...

  2. mysql date and time type ---- mysql 时间&日期 类型详解

    mysql 中支持用多种方式来表示时间与日期 一.mysql 中能表示时间与日期的数据类型: 1.表示年 ) -- 最好不要用这个数据类型.对于年份的取值中有[1901 --> 2155] + ...

  3. C编程测试存储格式为大段还是小段

    目前,计算机存储系统有2种存储格式,大端和小端.数据在内存中存储时以字节为单位,一个int类型有4个字节,这就导致是高字节对应低地址(大端模式),高字节对应高地址(小端模式).大端和小端模式本身没有对 ...

  4. eclipse下修改默认编码

    window-preferences-右侧选项卡-General-Workspace-Text file encoding

  5. Atitit.js javascript异常处理机制与java异常的转换 多重catc hDWR 环境 .js exception process Vob7

    Atitit.js javascript异常处理机制与java异常的转换 多重catc hDWR 环境 .js exception processVob7 1. 1. javascript异常处理机制 ...

  6. forward declaration of class 错误

    在使用Qt的时候遇到这个错误,查了一下发现,是因为我没有正确的使用前置声明. #ifndef FIRSTPAGE_H #define FIRSTPAGE_H #include "ui_dia ...

  7. ASP.NET基础（一）

    ExecuteNonQuery()的用法 下面我们将详细讲解如何在Page_Load()中对数据库的增加.删除.修改,最后我们再来总结一下ExecuteNonQuery(),ExecuteScalar ...

  8. CSS学习笔记（12）--Flex 布局教程：实例篇

    原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...

  9. php服务器环境变量

    可以把一些配置写到apache或nginx的配置里,然后在代码里判断环境变量来实现开发环境和线上环境的切换. 比如在本地可以 SetEnv APP_ENV local线上则 SetEnv APP_EN ...

  10. [Linux内核]软中断与硬中断

    转自:http://blog.csdn.net/zhangskd/article/details/21992933 本文主要内容:硬中断 / 软中断的原理和实现 内核版本:2.6.37 Author: ...