1. 首页
  2. 编程与技术

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

发布于 2017-02-27 21:58:52 | 95 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例，程序狗速度看过来！

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

下面小编就为大家带来一篇jquery树形菜单效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

</body>
</html>

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



最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务