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 相关文章推荐
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
javascript搜索框效果实现方法
May 14 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
使用Vue 实现滑动验证码功能
Jun 27 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基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
小程序实现左滑删除功能
2018/10/30 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
js实现录音上传功能
2019/11/22 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
Python中__name__的使用实例
2015/04/14 Python
RC4文件加密的python实现方法
2015/06/30 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
个人委托书范本
2014/04/02 职场文书
爱情寄语大全
2014/04/09 职场文书
安全保证书范文
2014/04/29 职场文书
自我评价优缺点范文
2015/03/11 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
Java的Object类的九种方法
2022/04/13 Java/Android