hovertree插件实现二级树形菜单(简单实用)


Posted in Javascript onDecember 28, 2016

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

下载网址:http://wd.3water.com:81//201612/yuanma/hovertree-0.1.2_3water.rar

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

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

hovertree插件实现二级树形菜单(简单实用)

hovertree插件实现二级树形菜单(简单实用)

使用方法可以参考以下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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 #Javascript
基于JS设计12306登录页面
Dec 28 #Javascript
JS实现搜索框文字可删除功能
Dec 28 #Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 #Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 #Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 #Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 #Javascript
You might like
十天学会php之第十天
2006/10/09 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
js 金额文本框实现代码
2012/02/14 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
你常见到的runtime exception
2016/09/05 面试题
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
政府四风问题整改措施
2014/10/04 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
检讨书大全
2015/01/27 职场文书
综合管理员岗位职责
2015/02/11 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript