使用jquery菜单插件HoverTree仿京东无限级菜单


Posted in Javascript onDecember 18, 2014

效果图:

使用jquery菜单插件HoverTree仿京东无限级菜单

看了上面效果图,你或许已经明白为什么是仿京东菜单。如果还不明白,请访问http://list.jd.com/list.html?cat=9987,653,655 看看左上的菜单。当然这个HoverTree菜单的功能更加强大,可以实现无限级菜单。
HTML代码:

<!DOCTYPE html>

<html>

<head>

<title>HoverTree - jquery菜单插件</title>

<base target="_blank" />

<link href="http://keleyi.com/jq/hovertree/css/jquery.hovertree.0.1.2.min.css" type="text/css" rel="Stylesheet" />

<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="http://keleyi.com/jq/hovertree/js/jquery.hovertree.0.1.2.min.js"></script>

</head>

<body>

<div style="width: 234px; margin-left:30px;">

<div>

<h3>

HoverTree菜单 0.1.2</h3>

</div>

<div style="width: 200px;">

<div id="keleyihovertree" class="hovertree">

<div class="hovertreeitem hvtcurrent">

<h3>

<b></b><a href="http://keleyi.com/list/">文章列表</a></h3>

<ul>

<li><a href="http://keleyi.com/menu/jquery/">jquery</a></li>

<li><a href="http://keleyi.com">Folder 2</a>

<ul>

<li><a href="http://keleyi.com">Sub Item 2.1</a></li>

<li><a href="http://keleyi.com">Folder 2.2</a>

<ul>

<li><a href="http://keleyi.com">Sub Item 2.2.1</a></li>

<li><a href="http://keleyi.com">Sub Item 2.2.2</a></li>

<li><a href="http://keleyi.com">Folder 2.2.3</a>

<ul>

<li><a href="http://keleyi.com">Sub Item 2.2.3.1</a></li>

<li><a href="http://keleyi.com">Sub Item 2.2.3.2</a></li>

<li><a href="http://keleyi.com">Sub Item 2.2.3.3</a></li>

<li><a href="http://keleyi.com">Sub Item 2.2.3.4</a></li>

<li><a href="http://keleyi.com">Sub Item 2.2.3.5</a></li>

</ul>

</li>

<li><a href="http://keleyi.com">Sub Item 2.1.4</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="http://keleyi.com/menu/javascript/">javascript</a></li>

<li><a href="http://keleyi.com/menu/html5/">html5</a></li>

<li><a href="http://keleyi.com/menu/webqd/">web前端</a></li>

<li><a href="http://keleyi.com/jq/">jQuery插件</a></li>

</ul>

</div>

<div>

<h3>

<b></b><a href="http://keleyi.com/jq/">jQuery Plugins</a></h3>

<ul>

<li><a href="http://keleyi.com/keleyi/">keleyi菜单</a></li>

<li><a href="http://keleyi.com/jq/randomvisit/">RandomVisit</a></li>

<li><a href="http://keleyi.com/jq/zonemenu/">ZoneMenu菜单</a></li>

<li><a href="http://keleyi.com/jq/myslider/">myslider</a></li>

<li><a href="http://keleyi.com/jq/hovertree/">hovertree</a></li>

</ul>

</div>

<div class="hovertreeitem">

<h3>

<b></b><a href="http://tool.keleyi.com">工具</a></h3>

<ul>

<li><a href="http://tool.keleyi.com/t/md5.htm">MD5加密</a></li>

<li><a href="http://keleyi.com/tool/md5.htm">MD5加密(Silverlight)</a></li>

<li><a href="http://keleyi.com/tool/htmlencode.htm">HTML编码与解码</a></li>

<li><a href="http://keleyi.com/tool/urldecode.htm">URL编码与解码</a></li>

<li><a href="http://keleyi.com/tool/regex.htm">.NET正则表达式匹配工具</a></li>

<li><a href="http://tool.keleyi.com/ip/wodeip.htm">查看IP地址</a></li>

</ul>

</div>

<div>

<h3>

<b></b><a href="http://keleyi.com/menu/aspnet/">ASP.NET</a></h3>

</div>

</div>

</div>

<a href="http://keleyi.com/jq/hovertree/demo/demo.0.1.0.htm">以前版本</a> <a href="http://plugins.jquery.com/hovertree/">

download</a>

</div>

<script type="text/javascript">

$("#keleyihovertree").hovertree({ "width": "keleyi", "initStatus": 'keleyi' });

</script>

</body>

</html>

是不是非常棒的效果呢,小伙伴们自己拿走使用吧

Javascript 相关文章推荐
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
jQuery实现视频作为全屏幕背景
Dec 18 #Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 #Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 #Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 #Javascript
JavaScript获取Url里的参数
Dec 18 #Javascript
Javascript实现单张图片浏览
Dec 18 #Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 #Javascript
You might like
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
PHP时间函数使用详解
2019/03/21 PHP
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
python 判断自定义对象类型
2009/03/21 Python
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python语言的12个基础知识点小结
2014/07/10 Python
Python新手实现2048小游戏
2015/03/31 Python
Python检测生僻字的实现方法
2016/10/23 Python
Windows下python3.7安装教程
2018/07/31 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
数据库连接池的工作原理
2012/09/26 面试题
高职教师岗位职责
2013/12/24 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
行政介绍信范文
2015/05/04 职场文书
古诗之感恩老师
2019/10/24 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis