原创

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

官方网址：http://keleyi.com/jq/hovertree/
欢迎下载使用

查看绿色效果：
http://keleyi.com/jq/hovertree/hovertreegreen.htm

可以设置菜单宽度(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>

本文转自：http://keleyi.com/a/bjad/6alcx1xr.htm

web前端：http://www.cnblogs.com/jihua/p/webfront.html

简单实用的二级树形菜单hovertree的更多相关文章

  1. 简单实用的下拉菜单（CSS+jquery）

    原文 简单实用的下拉菜单(CSS+jquery) 没什么可以说的,直接上例子 html+jquery代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  2. Android学习笔记之树形菜单的应用...

    PS:终于考完试了,总算是解脱了...可以正式上手项目开发了.... 学习内容: 1.掌握如何使用树形菜单...   对知识点进行一下补充...居然忘记了去学习树形菜单...不过在这里补上... Ex ...

  3. Android 多级树形菜单

    在Android里要实现树形菜单,都是用ExpandableList(也有高手自己继承ListView或者LinearLayout来做),但是ExpandableList一般只能实现2级树形菜单... ...

  4. 实用的树形菜单控件tree

     jQuery plugin: Treeview  这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview  jQuery  jstree  jsTree ...

  5. JS实现的简单横向伸展二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. CSS之简单树形菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 一个基于jQuery的简单树形菜单

    在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...

  8. 仿京东树形菜单插件hovertree

    hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http://ke ...

  9. 构建简单的json树形菜单

    json结构: var Menu = [{ tit:"一级菜单", submenu:[{ tit:"二级菜单", url:"", func: ...

随机推荐

  1. easyui-combobox实现省-市-区县级联菜单

    省:<input id="sheng" class="easyui-combobox" style="width:100px" dat ...

  2. JS数字计算精度误差的解决方法

    本篇文章主要是对javascript避免数字计算精度误差的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 如果我问你 0.1 + 0.2 等于几?你可能会送我一个白眼,0.1 + 0. ...

  3. Sql Server系列：Transact-SQL概述

    结构化查询语言(Structure Query Language,SQL)是对数据库进行查询和修改的语言.Transact-SQL是SQL的一种实现形式,它包含了标准的SQL语言部分. 根据完成的具体 ...

  4. Wireshark图解教程（简介、抓包、过滤器）

    开篇语 Wireshark是世界上最流行的网络分析工具.这个强大的工具可以捕捉网络中的数据,并为用户提供关于网络和上层协议的各种信息.与很多其他网络工具一样,Wireshark也使用pcap netw ...

  5. SqlServer用sql对表名、字段做修改

    1.重命名表  下例将表 users重命名为 userdd.  EXEC sp_rename 'users', 'userdd'  2. 重命名列  下例将表 userdd中的列 sex 重命名为 s ...

  6. 深入学习jQuery事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...

  7. MySQL学习笔记十一：数据导入与导出

    数据导入 1.mysqlimport命令行导入数据 在使用mysqlimport命令导入数据时,数据来源文件名要和目标表一致,不想改文件名的话,可以复制一份创建临时文件,示例如下. 建立一个文本use ...

  8. Ajax JQuery HTML 提交上传文件File HTML+ Ajax+ASP.NET+ WebService

    起因:公司最近有些项目用到了HTML+WebService的组合,发现访问速度等都快了许多,但是由于通过Ajax只能应付一些简单的文字类的传输,上传文件就捉襟见肘了,如果一直引用第三方的swf之类上传 ...

  9. 相克军_Oracle体系_随堂笔记009-检查点队列

    1.检查点队列 checkpoint queue RBA 日志块地址 redo block address LRBA 第一次被脏的地址 HRBA 最近一次被脏的地址 on disk rba 重做日志( ...

  10. JSP自定义tag

    前端需要调用后端的配置,想起velocity-tools.然而jsp的话,目前只能想到tag和EL表达式了. Tag相当好写,jsp2.0提供了简化写法: 编写一个java类: public clas ...