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取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
Python中的下划线详解
2015/06/24 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
python实现多进程代码示例
2018/10/31 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
《中华少年》教学反思
2014/02/15 职场文书
合伙协议书范本
2014/04/21 职场文书
电子商务专业求职信
2014/07/10 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
幸福来敲门观后感
2015/06/04 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
浅谈redis整数集为什么不能降级
2021/07/25 Redis