jQuery仿京东无限级菜单HoverTree
官方网址: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>
转载于:https://www.cnblogs.com/jihua/p/hvtree.html
jQuery仿京东无限级菜单HoverTree相关推荐
- 手机京东菜单html,jQuery仿京东商城手机端商品分类滑动切换特效
jQuery仿京东商城手机端商品分类滑动切换特效 一款仿京商城东手机移动端商品图片分类导航滑动效果,jQuery商品二级分类菜单切换特效. js代码 //设置cookie function setCo ...
- jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 商品浏览时的css,jquery仿京东商品放大浏览页面
jquery仿京东商品页面 京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的!!!! 仿京东商品页面css的代码!!! *{ margin: 0 ...
- php商品浏览页面,jquery仿京东商品放大浏览页面_实例分享
前面我们和大家分享过很多仿京东功能的文章,本文我们主要为大家详细介绍jquery仿京东商品浏览页面,鼠标放在图片上实现放大效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. j ...
- 用jQuery仿京东收货地址
代码优化及修正说明,新增两个功能,第一.指定parentId[用于筛选对应数据的根节点数],第二.返回所选择的数据数据及创建的class名称[用于重新绑定点击事件].代码实例及创建代码如下: < ...
- HTML京东商品页面代码,jquery仿京东商品页面代码分享
jquery仿京东商品页面 京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的!!!! 仿京东商品页面的效果!!! 仿京东商品页面css的代码!! ...
- h5仿android 京东三级联动,jquery仿京东商城三级联动代码插件
2019-3-1更新:location.js文件里第三级县之前使用京东旧域名d.360buy.com的jsonp数据,域名做了跳转首页所以第三加载不出来.现在已经更新为d.jd.com,正常加载.不过 ...
- 仿京东树形菜单插件hovertree
hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/ 欢迎下载使用 查看绿色效果: http:// ...
- 楼梯式导航 html,jQuery仿京东商城楼梯式导航定位菜单|jquery网站楼层导航
jQuery京东浮动网站楼层导航代码是一款仿京东商城网页左侧浮动楼层导航特效代码.具有一定的参考价值,感兴趣的小伙伴们可以参考一下. CSS样式如下: *{ margin:0; padding:0; ...
最新文章
- java 操作uart串口_【tty】应用程序调用write写串口调用流程
- 机器学习数据清洗之缺失值处理、缺失的原因、缺失值删除、缺失值填充、KNN填充
- linux内核中启动页面,Linux内核启动过程分析
- python做数据分析难么_做统计学习,数据分析应该学Python还是R?
- centos7安装mysql的rpm_Centos7 安装MySQL(rpm方式)
- onresize的应用--自适应弹窗
- 窗口大小改变时,显示内容的处理(正投影情况)
- LeetCode 57. 插入区间(合并区间+排序)(区间重叠问题汇总)
- 简记MobileNet系列
- 基于STP的两种负载均衡的介绍
- Arduino蓝牙无线自动下载程序
- 通信系统仿真原理与无线应用笔记-MATLAB
- 用计算机运算符编写检索式,检索式
- ArcGIS Engine打开文件地理数据库
- 别再问我阿里面试流程了!!!P8 面试官 花了一个月整理了这份 4000 字的 面试流程
- 基于OPC通讯的远程连接及测试流程
- python表单验证wtf_正在验证wtfforms中的美国电话号码
- 萝卜小铺和店主们的故事(五)
- oracle密码锁屏时间,OPPO用户怎么让手机变流畅?花1分钟关闭这4个设置,瞬间变流畅...
- 2023年如何实习QQ强制拉人入群,QQ批量拉群,QQ强制拉群软件开发定制的思路解析