使用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 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
详解javascript事件冒泡
Jan 09 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
清除输入框内的空格
Dec 21 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
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中的字符串函数
2006/10/09 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
Javascript中replace()小结
2015/09/30 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
详解python调用cmd命令三种方法
2019/07/08 Python
Python socket聊天脚本代码实例
2020/01/02 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
参观考察邀请函范文
2014/01/29 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
调解协议书
2014/04/16 职场文书
培训班通知
2015/04/25 职场文书
小学同学聚会感言
2015/07/30 职场文书
体育教师研修感悟
2015/11/18 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
python b站视频下载的五种版本
2021/05/27 Python
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL