首页
所有分类
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 相关文章推荐
javascript测试题练习代码
Oct 10 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
javascript中this的四种用法
May 11 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 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
Switch(1) EditText(1) filter(1) Selenium(1) Django(9) TextInputLayout(1) openEuler(1) Spring JPA(1) Tsmoothie(1) Spring Bean(1)
You might like
php microtime获取浮点的时间戳
2010/02/21 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
php程序内部post数据的方法
2015/03/31 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
详解PHP中的 input属性（隐藏 只读 限制）
2017/08/14 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
js 颜色选择插件
2017/01/23 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
深入理解Angular中的依赖注入
2017/06/26 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python实现控制COM口的示例
2019/07/03 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
浅析python实现动态规划背包问题
2020/12/31 Python
弘扬职业精神演讲稿
2014/03/20 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js