官方网址: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仿京东无限级菜单,需要的朋友可以参考下
基于ajax、jquery 通用无限级联菜单; 引用场景: 国家省市级联菜单、任何二级级联菜单、三级菜单、四级菜单、五.... 使用范例:详细参阅District.Selector.js文件 以国家地理信息为例: $(function () { var ...
jQuery仿京东商品分类导航菜单
jquery仿京东滑动选项卡特效,带游标在菜单下面滑动的,而不是直接显示隐藏,这种是按图片轮播功能写的,代码很简单,整个功能就10多行
jQuery商品分类导航菜单仿京东,通过JQUERY实现的
主要介绍了jQuery简单实现仿京东商城的左侧菜单效果代码,通过简单的jQuery鼠标事件及元素动态变换实现样式动态切换功能,非常简单实用,需要的朋友可以参考下
jQuery 仿京东商城产品展示切换及放大效果 jQuery 仿京东商城产品展示切换及放大效果
js实现无限级菜单js实现无限级菜单js实现无限级菜单
jQuery多级无限级导航下拉菜单
一个漂亮完善的jQuery仿京东商品筛选功能
jQuery多级无限级导航下拉菜单代码, jQuery多级无限级导航下拉菜单代码是一款可智能判断有没有下级菜单列表的网站下拉菜单特效。 js代码 [removed] $(document).ready(function() { $("ul.nav li").hover...
jQuery仿京东搜索条件筛选代码是一款基于json制作京东商品列表搜索条件筛选,可自定义多个条件筛选功能代码。适用于商城商品快速筛选代码。
jQuery仿京东侧边购物车菜单的代码
jquery_无限级联菜单,无需ajax,纯json数据调用 简单的调用方式 $.getScript("toregion.js",function(){ var ops = { tree_json:regionConf,//json字符串 tree_json_name:"regionConf",//json字符串变量名称 ...
jQuery仿京东侧边购物车菜单代码
jquery仿京东二级级联菜单导航
jQuery仿京东侧边购物车菜单代码是一款类似京东商城网站的jQuery侧边栏购物车代码。
s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单
jQuery仿京东商城侧边栏购物车菜单代码,用在商城网站中,在右侧展示购物车信息,然后还可以去结算,不错的效果,php中文网推荐下载!