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 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
介绍一下28个JS常用数组方法
May 06 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
Prototype使用指南之base.js
2007/01/10 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
python实现ipsec开权限实例
2014/11/11 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
Python PO设计模式的具体使用
2019/08/16 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
世界上最大的二手相机店:KEN
2017/05/17 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
主题教育活动总结
2014/05/05 职场文书
机械机修工岗位职责
2014/08/03 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python