官方网址：http://keleyi.com/jq/hovertree/

效果图：

看了上面效果图，你或许已经明白为什么是仿京东菜单。如果还不明白，请访问http://list.jd.com/list.html?cat=9987,653,655 看看左上的菜单。当然这个HoverTree菜单的功能更加强大，可以实现无限级菜单。这是买手机的页面，买安卓手机须知：http://keleyi.com/a/bjad/rx7ma1oy.htm

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>

jQuery仿京东无限级菜单HoverTree的更多相关文章

  1. iOS仿京东分类菜单之UICollectionView内容

    在上<iOS仿京东分类菜单实例实现>已经实现了大部分主体的功能,本文是针对右边集合列表进行修改扩展,使它达到分组的效果,本文涉及到的主要是UICollectionView的知识内容,左边列 ...

  2. jQuery仿京东首页广告图片切换图片轮播

    1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. 仿京东树形菜单插件hovertree

    hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http://ke ...

  4. iOS仿京东分类菜单实例实现

    在APP开发过程中此功能还是比较常见的模块,左边为菜单展示,右边为菜单下数据的展示,选择不同的菜单右边的数据源进行更新,此实例主要运用到UITableView,UICollectionView,OC谓 ...

  5. Jquery仿京东分类导航层简单实现

    <script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script& ...

  6. 仿京东左侧菜单 hover效果-简易demo

    简单描述: 用到的知识点 css 中的绝对定位 以及 Js 中的事件冒泡(或事件委托) .cont{display:inline-block;width:200px;height:200px;bord ...

  7. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  8. jquery 仿windows10菜单效果下载

    http://www.kuitao8.com/20150923/4079.shtml jquery 仿windows10菜单效果下载

  9. jquery实现仿京东侧边栏

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. Android入门(七)碎片的生命周期与限定符

    原文链接:http://www.orlion.ga/560/ 这篇文章实际已经在上篇文章中写的差不多了,但是万恶的wordpress没保存!已经不止一次出现这种情况了! 一.碎片的生命周期 1.碎片的 ...

  2. IO流-文本IO\读写二进制数据

    文本IO 一.简述 OutputStreamWriter类使用选定的编码方式吧Unicode字符流转换为字节流,InputStreamReader类将包含字节的输入流转为可以产生Unicode字符的读 ...

  3. C#多线程之旅(4)——APM初探

    源码地址:https://github.com/Jackson0714/Threads 原文地址:C#多线程之旅(4)——APM初探 C#多线程之旅目录: C#多线程之旅(1)——介绍和基本概念 C# ...

  4. SQL 语句中union all和order by同时使用

            最近做的一个财物管理系统中查询过期或逾期的存储过程,返回 “财物所属的案件名称”,“财物名称”,“财物编号”,“过期或逾期时间”(超期或逾期前7天开始预警). 遇到“union all ...

  5. PHP的学习--可变变量

    可变变量 有时候使用可变变量名是很方便的.就是说,一个变量的变量名可以动态的设置和使用.一个普通的变量通过声明来设置,例如: <?php $a = 'hello'; ?> 一个可变变量获取 ...

  6. javascript学习7

    JavaScript  Math(算数)对象 Math(算数)对象的作用是:执行常见的算数任务. 实例 round() 如何使用 round(). random() 如何使用 random() 来返回 ...

  7. ASP.NET 网站从Sever2003迁移到Sever 2008部署后不能访问

    最近公司运维迁移网站遇到部署后始终不能访问,一直提示无法访问请求的页面,但是请求页面正常,程序没问题,在本地电脑运行正常,运维找了好久没找到原因. 后来问我,我也找了好久,最后终于解决了. 解决方法是 ...

  8. select查询时，如何把指定的行放置在最前面

    可以用case when做一个列,然后根据这个列来排序,下面给出代码 ' end) as 'abc' from table order by abc

  9. Struts2 源码分析——前言

    笔者简言 笔者在博园里面注册是在二年前.可是那个时候我不知道要写些什么,也怕写出来被别人骂误人子弟.而现在却动笔了是因为前一段时间内我去参加一些大公司的面试,让笔者内心深处留下很多问号.最近三年来我一 ...

  10. 基于HTML5的3D网络拓扑自动布局

    上篇将HT for Web的3D拓扑弹力布局的算法运行在Web Workers后台(http://www.hightopo.com/blog/70.html),这篇我们将进一步折腾,将算法运行到真正的 ...