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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
js onclick事件传参讲解
Nov 06 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
vue el-table实现行内编辑功能
Dec 11 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
帝国cms目录结构分享
2015/07/06 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
Vue异步加载about组件
2017/10/31 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
python调用百度语音REST API
2018/08/30 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
python3中rank函数的用法
2019/11/27 Python
python实现双色球随机选号
2020/01/01 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
瀑布模型都有哪些优缺点
2014/06/23 面试题
土木工程专业自荐信
2013/10/04 职场文书
出差报告格式模板
2014/11/06 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
建国大业观后感600字
2015/06/01 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android