首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery树形菜单效果的简单实例

Posted in Javascript onJune 06, 2016 
<!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树形导航菜单插件制作滑动多级二级下拉菜单展示 3water.com</title>
<meta name="description" content="jquery树形导航菜单插件制作一个类似树形展示的slider滑动多级二级下拉菜单目录，支持无限嵌套。jquery插件,jquery下载。" />
<script type="text/javascript" src="http://3water.com/keleyi/pmedia/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://3water.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://3water.com/keleyi/phtml/jtree/icon-folder-open.gif) 5px 50% no-repeat;}
.tree li a.tree-parent-collapsed{background:url(http://3water.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://3water.com/" target="_blank" title="jquery图片切换">jquery图片切换</a></li>
<li><a href="http://3water.com/" target="_blank" title="jquery幻灯片">jquery幻灯片</a></li>
<li><a href="http://3water.com/" target="_blank" title="jquery图片滚动">jquery图片滚动</a></li>
<li><a href="http://3water.com/" target="_blank" title="jquery图片放大镜">jquery图片放大镜</a></li>
<li><a href="http://3water.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://3water.com/" target="_blank" title="jquery动画菜单">jquery动画菜单</a></li>
<li><a href="http://3water.com/" target="_blank" title="jquery树形菜单">jquery树形菜单</a></li>
<li><a href="http://3water.com/" target="_blank" title="jquery下拉菜单">jquery下拉菜单</a></li>
<li><a href="http://3water.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://3water.com/" target="_blank" title="jquery选项卡切换">jquery选项卡切换</a></li>
<li><a href="http://3water.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://3water.com/" target="_blank" title="jquery文字滚动">jquery文字滚动</a></li>
<li><a href="http://3water.com/" target="_blank" title="jquery文字闪烁">jquery文字闪烁</a></li>
<li><a href="http://3water.com/" target="_blank" title="jquery文字切换">jquery文字切换</a></li>
<li><a href="http://3water.com/" target="_blank" title="jquery文字数量">jquery文字数量</a></li>
<li><a href="http://3water.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://3water.com/" target="_blank" title="jquery表单验证">jquery表单验证</a></li>
<li><a href="http://3water.com/" target="_blank" title="jquery表单美化">jquery表单美化</a></li>
<li><a href="http://3water.com/" target="_blank" title="jquery搜索提示">jquery搜索提示</a></li>
<li><a href="http://3water.com/" target="_blank" title="jquery搜索提示">jquery搜索提示</a></li>
<li><a href="http://3water.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://3water.com/" target="_blank" title="jquery图表插件">jquery图表插件</a></li>
<li><a href="http://3water.com/" target="_blank" title="jquery表格排序">jquery表格排序</a></li>
<li><a href="http://3water.com/" target="_blank" title="jquery表格排序">jquery表格排序</a></li>
<li><a href="http://3water.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://3water.com/" target="_blank" title="js图片切换">js图片切换</a></li>
<li><a href="http://3water.com/" target="_blank" title="js幻灯片">js幻灯片</a></li>
<li><a href="http://3water.com/" target="_blank" title="js图片滚动">js图片滚动</a></li>
<li><a href="http://3water.com/" target="_blank" title="js图片放大镜">js图片放大镜</a></li>
<li><a href="http://3water.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://3water.com/" target="_blank" title="js动画菜单">js动画菜单</a></li>
<li><a href="http://3water.com/" target="_blank" title="js树形菜单">js树形菜单</a></li>
<li><a href="http://3water.com/" target="_blank" title="js下拉菜单">js下拉菜单</a></li>
<li><a href="http://3water.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://3water.com/" target="_blank" title="js选项卡切换">js选项卡切换</a></li>
<li><a href="http://3water.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://3water.com/" target="_blank" title="js文字滚动">js文字滚动</a></li>
<li><a href="http://3water.com/" target="_blank" title="js文字闪烁">js文字闪烁</a></li>
<li><a href="http://3water.com/" target="_blank" title="js文字切换">js文字切换</a></li>
<li><a href="http://3water.com/" target="_blank" title="js文字数量">js文字数量</a></li>
<li><a href="http://3water.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://3water.com/" target="_blank" title="js表单验证">js表单验证</a></li>
<li><a href="http://3water.com/" target="_blank" title="js表单美化">js表单美化</a></li>
<li><a href="http://3water.com/" target="_blank" title="js搜索提示">js搜索提示</a></li>
<li><a href="http://3water.com/" target="_blank" title="js搜索提示">js搜索提示</a></li>
<li><a href="http://3water.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://3water.com/" target="_blank" title="js图表插件">js图表插件</a></li>
<li><a href="http://3water.com/" target="_blank" title="js表格排序">js表格排序</a></li>
<li><a href="http://3water.com/" target="_blank" title="js表格排序">js表格排序</a></li>
<li><a href="http://3water.com/" target="_blank" title="3water.com">柯乐义</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="javascript:void(0);">flash特效</a>
<ul class="tree">
<li><a href="http://3water.com/" target="_blank" title="flash图片特效">flash图片特效</a></li>
<li><a href="http://3water.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://3water.com/" target="_blank" title="div+css布局">div+css布局</a></li>
<li><a href="http://3water.com/" target="_blank" title="3water.com">柯乐义</a></li>
<li><a href="http://3water.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://3water.com/" target="_blank" title="柯乐义">3water.com</a></li>
<li><a href="http://3water.com/" target="_blank" title="html5图表">html5图表</a></li>
</ul>
</li>
</ul></div>

</body>
</html>

以上这篇jquery树形菜单效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

jquery树形菜单效果的简单实例

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用js实现计算加载页面所用的时间
Apr 02 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
vue.js路由跳转详解
Aug 28 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
逻辑表达式中与或非的用法详解
Jun 06 #Javascript
node.js 中国天气预报 简单实现
Jun 06 #Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 #Javascript
js获取元素的外链样式的简单实现方法
Jun 06 #Javascript
node.js cookie-parser之parser.js
Jun 06 #Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 #Javascript
node.js cookie-parser 中间件介绍
Jun 06 #Javascript
优化(1) Counter(1) 爬虫(2) redo log(1) Xpath(1) MIME(1) 抖音(1) LOGO(1) binlog(2) 写入策略(1)
You might like
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
php绘制圆形的方法
2015/01/24 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
arguments对象
2006/11/20 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
JS 根据子网掩码，网关计算出所有IP地址范围示例
2020/04/23 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
JS实现的集合去重，交集，并集，差集功能示例
2018/03/13 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
JavaScript检测是否开启了控制台（F12调试工具）
2020/10/02 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
python 删除非空文件夹的实例
2018/04/26 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
澳大利亚珍珠首饰购物网站：Vayo Pearls
2019/03/11 全球购物
Kathmandu新西兰官网：新西兰户外运动品牌
2019/07/27 全球购物
服装设计专业自荐书范文
2013/12/30 职场文书
考博专家推荐信
2014/05/10 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
公司股份合作协议书
2014/12/07 职场文书
一个成功的互联网创业项目，必须满足这些要求
2019/08/23 职场文书
nginx容器方式反向代理实战
2022/04/18 Servers