hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种。

官方网址:http://keleyi.com/jq/hovertree/
欢迎下载使用

查看绿色效果:
http://keleyi.com/jq/hovertree/hovertreegreen.htm

可以设置菜单宽度(width),还可以设置是否最多只能有一个一级菜单展开(isCloseOther)。

isCloseOther的值为false 或者 true,设为true即成为手风琴菜单。


使用方法可以参考以下HTML源代码:
<!DOCTYPE html>
<html>
<head>
<title>hovertree</title><base target="_blank" />
<link href="http://keleyi.com/jq/hovertree/css/jquery.hovertree.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.js"></script>
</head>
<body>

<div id="keleyihovertree" class="hovertree">
<div class="item current">
<h3>
<b></b>Web前端</h3>
<ul>
<li><a href="http://keleyi.com/menu/jquery/">jquery</a></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 class="item">
<h3>
<b></b>jQuery Plugins</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="item">
<h3>
<b></b>工具</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>

<a href="hovertreegreen.htm">Green Style</a> <a href="http://plugins.jquery.com/hovertree/">download</a>

<script type="text/javascript">
$("#keleyihovertree").hovertree({ "width": "200px"});
</script>
</body>
</html>

转载于:https://www.cnblogs.com/double405/p/5174567.html

仿京东树形菜单插件hovertree相关推荐

  1. html jquery 菜单选中,jQuery树形菜单插件多级菜单选中代码

    特效描述:jQuery 树形菜单插件 多级菜单选中.jQuery树形菜单插件,点击展开多级下拉菜单,点击选中菜单效果代码. 代码结构 1. 引入JS 2. HTML代码 打开 | 关闭 d = new ...

  2. jQuery仿京东无限级菜单HoverTree

    官方网址:http://keleyi.com/jq/hovertree/ 效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list ...

  3. Github 树形菜单插件

    ajax显示gitlab的,很像mac的树形展示. 直接在左侧做了一个ajax的树,每次访问gitlab自动加载.非常方便呢,在国内网速这么慢的情况下更显得好用了. 下载地址: https://git ...

  4. 仿京东左侧菜单弹出html代码,相仿京东左侧菜单

    Furniture * {margin:0; padding:0;} html {color:#434343; background-color:#fff;} body{color:#434343;f ...

  5. 仿京东左侧菜单弹出html代码,一个类似京东网页左侧菜单扩展的特效代码

    Furniture * {margin:0; padding:0;} html {color:#434343; background-color:#fff;} body{color:#434343;f ...

  6. 简单实用的二级树形菜单hovertree

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

  7. 仿京东、饿了么 左右联动菜单列表自定义View

    仿京东.饿了么 左右联动菜单列表 这是一个左右联动的自定义View 这里本人将两个列表进行了联动封装,使用的时候调用方法即可,方便快捷,扩展性也强. 完整Demo传送门 效果图: 正题开始: 我们看一 ...

  8. 手机京东菜单html,jQuery仿京东商城手机端商品分类滑动切换特效

    jQuery仿京东商城手机端商品分类滑动切换特效 一款仿京商城东手机移动端商品图片分类导航滑动效果,jQuery商品二级分类菜单切换特效. js代码 //设置cookie function setCo ...

  9. ECSHOP模板堂仿京东属性跳转插件,ecshop商品不同属性不同url插件,ecshop点击该属性跳到新页面

    简介: 大家熟知的ECSHOP本身自带的功能在点选属性之后都是留在当前页面,充其量就是价格发生变化.模板堂仿京东属性跳转插件可在后台属性添加跳转商品ID即可实现商品详情页点击不同属性跳转到不同商品页面 ...

最新文章

  1. Java 压缩字符串
  2. php删除字段某个字段,php数如何组删除某个字段
  3. 使用MQTT与函数计算做热力图的实践
  4. QT之 Hello World
  5. logistic回归 如何_Logistic回归分析之二元Logistic回归
  6. JavaStudyNotes
  7. Python实现猜拳游戏
  8. 计算机求和便捷应用,4种常用求和方法 | Excel自动求和全攻略!
  9. 2013年台式计算机型号,2013cpu天梯图,台式机处理器天梯图
  10. Linux Cannot assign requested address
  11. C语言atan2()函数:求y/x的反正切值
  12. 以下是根据在下的一些朋友芳名作诗,请朋友指点,继续增加中
  13. 我,28岁程序员,没想到今年找工作这么难
  14. 默哀日、灾难日,纪念日,哀悼日等网站都变成黑白色
  15. 刷题/笔试常(自)用模板
  16. 抖音巨量引擎1 创建广告计划
  17. 开源中国广州源创会分享
  18. 朱有鹏 TCP协议(2)
  19. javaweb 投票系统
  20. 三星+android+u盘模式,三星手机usb存储器如何连接电脑的【详解】

热门文章

  1. 工作方法 - 戒定慧
  2. EOS智能合约开发-开发环境搭建
  3. JavaScript进入网吧案例
  4. [转载]儿童画教学-理论篇
  5. SVN中英文菜单对照
  6. 关于一坨屎的寓言故事
  7. 笔记本电脑连接蓝牙耳机设备
  8. 帮你提升 Python 的 27 种编程语言
  9. 仙浴湾海洋牧场:千元野生海参不要钱,还赚1.2倍回家
  10. odoo 上下文对象