hovertree插件实现二级树形菜单（简单实用）

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

下载网址：http://wd.jb51.net:81//201612/yuanma/hovertree-0.1.2_jb51.rar

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

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

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 使用jquery菜单插件HoverTree仿京东无限级菜单

    使用jquery菜单插件HoverTree仿京东无限级菜单

    效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list.html?cat=9987,653,655 看看左上的菜单.当然这个HoverTree菜单的功能更加强大,可以实现无限级菜单. HTML代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>HoverTree - jquery菜单插件</title> <base t

  • 分享一个取自HoverTree项目的.NET分页类

    这是一个实际应用中的类,代码出自HoverTree项目,适用与.NET平台,一般在ASP.NET中使用.效果可以在HoverTree官网看到. /* 在HoverTree CMS项目中使用 * 可以用于ASP.NET分页 */ namespace HoverTree.Framework.WebUI { public class KeleyiPager { public static string BuildPageIndex(int pageIndex, int totalPageCount)

  • hovertree插件实现二级树形菜单（简单实用）

    hovertree插件实现二级树形菜单（简单实用）

    hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 下载网址:http://wd.jb51.net:81//201612/yuanma/hovertree-0.1.2_jb51.rar 可以设置菜单宽度(width),还可以设置是否最多只能有一个一级菜单展开(isCloseOther). isCloseOther的值为false 或者 true,设为true即成为手风琴菜单. 使用方法可以参考以下HTML源代码: <!DOCTYPE html> <html&

  • JS+CSS实现TreeMenu二级树形菜单完整实例

    JS+CSS实现TreeMenu二级树形菜单完整实例

    本文实例讲述了JS+CSS实现TreeMenu二级树形菜单.分享给大家供大家参考.具体如下: 这是一款二级树形菜单示例:CSS TreeMenu ,非常漂亮的树形菜单,用在网站右侧比较合适. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-treemenu-2l-menu-codes/ 具体代码如下: <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" &

  • CSS TreeMenu 二级树形菜单示例

    二级树形菜单示例:CSS TreeMenu a,a:visited {color:#333;text-decoration:none;} a:hover {color:#f60;} body,td {font:13px "Geneva","宋体", "Arial", "Helvetica",sans-serif;} ul,li {margin:0;padding:0;list-style:none;} h1,h2,h3,h4,

  • 基于zTree树形菜单的使用实例

    在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class="ztree" 第二步:开启简单数据格式支持 第三步:编写树形菜单数据 第四步:生成树形菜单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ztree树形菜单的使用</title> &

  • zTree树形菜单交互选项卡效果的实现方法

    1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ztree树形菜单的使用</title> <!-- 导入jquery核心类库 --> <script type="text/javascript" src="../js

  • Android提高之多级树形菜单的实现方法

    Android提高之多级树形菜单的实现方法

    一般来说在Android里要实现树形菜单,都是用ExpandableList(也有高手自己继承ListView或者LinearLayout来做),但是ExpandableList一般只能实现2级树形菜单.本文所述实例也依然使用ExpandableList,但是要实现的是3级树形菜单. 本文程序运行效果图如下图所示: 当用BaseExpandableListAdapter来实现二级树形菜单时,父项(getGroupView())和子项(getChildView())都是使用TextView.当要实

  • Bootstrap树形菜单插件TreeView.js使用方法详解

    Bootstrap树形菜单插件TreeView.js使用方法详解

    jQuery多级列表树插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 效果图: 具体使用方法: 插件依赖 Bootstrap v3.0.

  • jquery树形菜单效果的简单实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

  • JS+CSS简单树形菜单实现方法

    JS+CSS简单树形菜单实现方法

    本文实例讲述了JS+CSS简单树形菜单实现方法.分享给大家供大家参考.具体如下: 这是一款不错的CSS树形菜单,树状列表,当然不全是CSS实现,部分功能还使用了JavaScript代码进行配合,删减了修饰用的菜单图片,大家用的时候自己图片加进去,IMG标签大部分都预留了出来,稍懂Html语法的朋友很容易就看懂的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-tree-menu-style-codes/ 具体代码如下

  • JavaScript实现非常简单实用的下拉菜单效果

    JavaScript实现非常简单实用的下拉菜单效果

    本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款实用的JS下拉菜单,鼠标移上菜单就显示出二级菜单,是从其它网站上整理下来的,修改花了不少时间,现在去除了一些无用代码,更简洁了,而且代码兼容性似乎也表现不错,这款两级下拉菜单,基本是由CSS和JavaScript共同实现的,真的挺简洁实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-down-show-menu-code

随机推荐