编程 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 Archive Network 集合

May 12 Javascript

AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

Jun 06 Javascript

jquery实现树形菜单完整代码

Dec 29 Javascript

使用Script元素发送JSONP请求的方法

Jun 12 Javascript

基于javascript中的typeof和类型判断(详解)

Oct 27 Javascript

Javascript中JSON数据分组优化实践及JS操作JSON总结

Dec 22 Javascript

微信运维交互机器人的示例代码

Nov 12 Javascript

基于vue实现一个神奇的动态按钮效果

May 15 Javascript

vue-autoui自匹配webapi的UI控件的实现

Mar 20 Javascript

React生命周期原理与用法踩坑笔记

Apr 28 Javascript

JavaScript图像放大镜效果实现方法详解

Jun 28 Javascript

JavaScript原型链中函数和对象的理解

Jun 16 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