官方网址：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. javascript类型系统——包装对象

    × 目录 [1]定义 [2]生存期 [3]显式创建[4]转型函数[5]比较运算 前面的话 javascript对象是一种复合值,它是属性或已命名值的集合.通过'.'符号来引用属性值.当属性值是一个函数 ...

  2. JavaScript闭包（一）——实现

    闭包的官方的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 通俗点的说法是: 从理论角度:所有的函数.因为它们都在创建的时候就将上层上下文 ...

  3. Sparse Filtering 学习笔记（三）目标函数的建立和求解

      Sparse Filtering 是一个用于提取特征的无监督学习算法,与通常特征学习算法试图建模训练数据的分布的做法不同,Sparse Filtering 直接对训练数据的特征分布进行分析,在所谓 ...

  4. 轻松自动化---selenium-webdriver(python) (十二)

    本节重点: l 键盘按键用法 l 键盘组合键用法 l send_keys() 输入中文运行报错问题 键盘按键键用法: #coding=utf-8 from selenium import webdri ...

  5. webstom设置和monokia配色方案

    首先,最后配色结果如下: 本次配色参考几个文档: http://frontenddev.org/article/webstorm-portal-1-subject-and-match-colors.h ...

  6. HT for Web基于HTML5的图像操作（一）

    HT for Web独创的矢量图片设计架构,使其具有强大丰富的动态图形呈现能力,但从最近知乎热议的“Adobe Photoshop 是否已经过时?”的话题,大家能体会到很多情况下实际项目不可能完全采用 ...

  7. 我读过的最好的epoll讲解--转自”知乎“

    首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O操作的内核对象. 不管是文件,还是套接字,还是管道,我们都可以把他们看作流. 之后我们来讨论I/O的操作,通过read ...

  8. OracleHelper数据库事务处理

    原理:需要开启事务的Action贴上Transaction标签,则Action执行前开启事务,Action执行完提交事务,如果Action报错,则回滚事务. OracleHelper代码: using ...

  9. 基于MVC4+EasyUI的Web开发框架经验总结（3）- 使用Json实体类构建菜单数据

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  10. C#将集合快速排序

    C#实现集合排序类. 说明: 1.集合类型参数化: 2.可根据集合中的对象的各个属性进行排序,传入属性名称即可: 注:属性必须实现了IComparable接口,C#中int.datetime.stri ...