原创

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. php ajax 交互

    html 页面 <body> <button id="oBtn">点击我</button> <script type="text ...

  2. Spring中AOP（通知）的使用

    1.新建 Spring Bean Configuration File  xml格式的文件 2. xml文件 <bean id="my1" class="xml.M ...

  3. Javascript学习记录——原生JS实现旋转木马特效

    昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...

  4. Python 学习之路 （前言）

    为什么要学Python  1,脚本语言本身很方便简洁,未来会有趋势 2,web 方向 3,运维方向 我是学静态语言出身的,java,毕业后从事android 应用开发,曾在工作期间学习过linux,想 ...

  5. C#设计模式系列：简单工厂模式（Simple Factory）

    1. 简单工厂模式简介 1.1 定义 简单工厂模式定义一个Factory类,可以根据参数的不同返回不同类的实例,被创建的实例通常有共同的父类. 简单工厂模式只需要一个Factory类. 简单工厂模式又 ...

  6. C指针(二)

    原文链接:http://www.orlion.ga/924/ 一.指针与const限定符 const限定符与指针结合起来常见的情况有一下几种: const int *a; int const *a; ...

  7. MVC4做网站后台:栏目管理3、删除栏目与左侧列表菜单

    一.左侧列表菜单 打开视图Menu.cshtml,增加部分见红框 在category中添加脚本 //栏目菜单加载完毕函数 function CategoryMenu_Ready() { $('#cat ...

  8. JMM和happens-before原则

    JMM: Java Memory Model(Java内存模型),围绕着在并发过程中如何处理可见性.原子性.有序性这三个特性而建立的模型. 可见性: JMM提供了volatile变量定义.final. ...

  9. 【原创】Aspose.Words组件介绍及使用—基本介绍与DOM概述

           本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 本博客其他.NET开源项目文章目录:http://www.cnbl ...

  10. EntityFramework之你不知道的那些事（七）

    前言 前面一系列几乎都是循序渐进式的进行叙述,似乎脚步走得太快了,于是我开始歇一歇去追寻一些我所不太了解的细枝末节,在此过程中也屡次碰壁,但是唯有如此才能更好的成长,不是吗!希望此文对你亦有帮助. 属 ...