官方网址：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. [C] C语言中的布尔值

    C不具备显示的布尔类型,所以使用整数来代替,规则是:零是假,任何非零值皆为真. 反过来说,如果逻辑表达式为真其值一定为真,若逻辑表达式为假其值一定为零.

  2. Windows Azure Web Site (1) 用户手册

    <Windows Azure Platform 系列文章目录> 下载地址: Web Apps用户手册

  3. 关于C# Winform DataGridView 设置DefaultCellStyle无效的原因与解决方案

    上周在开发Winform 项目中,我曾遇到一个看似简单,但一直都没有解决的问题,那就是:设置winform DataGridView控件的行DefaultCellStyle,但却没有任何变化,我也曾求 ...

  4. 从.net转型，聊聊最近一些面试,薪资和想法

    上一个星期,一篇名为<.net估计要写在你手里了>几乎点燃了整个园子,有人群情激愤了,有人点赞的,有人上去打算喷博主个体无完肤的,总之,这篇博客很成功的引起一些.net 从业者的思考,也包 ...

  5. 初探Spring - IOC原理

    一.IOC是什么 控制反转(Inversion of Control,缩写为IoC),是面向对象编程中的一种设计原则,可以用来降低代码之间的耦合度.其中最常见的方式叫做依赖注入(Dependency ...

  6. Android 手机上获取物理唯一标识码[转]

    所有添加有谷歌账户的设备可以返回一个 ANDROID_ID 所有的CDMA设备对于 ANDROID_ID 和 TelephonyManager.getDeviceId() 返回相同的值(只要在设置时添 ...

  7. 【转】NoSQL初探之人人都爱Redis：（1）Redis简介与简单安装

    一.NoSQL的风生水起 1.1 后Web2.0时代的发展要求 随着互联网Web2.0网站的兴起,传统的关系数据库在应付Web2.0网站,特别是超大规模和高并发的SNS类型的Web2.0纯动态网站已经 ...

  8. ASP.NET MVC程序播放H.264视频

    在这篇之前,Insus.NET不管是在ASP.NET还是ASP.NET MVC实现很多视频播放,你可以参考这篇链接:http://www.cnblogs.com/insus/category/4650 ...

  9. Entity Framework 实体框架的形成之旅--为基础类库接口增加单元测试，对基类接口进行正确性校验（10）

    本篇介绍Entity Framework 实体框架的文章已经到了第十篇了,对实体框架的各个分层以及基类的封装管理,已经臻于完善,为了方便对基类接口的正确性校验,以及方便对以后完善或扩展接口进行回归测试 ...

  10. xpath学习积累

    "//comment()":“所有注释节点”