当前位置: 首页 > 编程笔记 >

hovertree插件实现二级树形菜单(简单实用)

祁建业
2023-03-14
本文向大家介绍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>
<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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍JS+CSS实现TreeMenu二级树形菜单完整实例,包括了JS+CSS实现TreeMenu二级树形菜单完整实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS+CSS实现TreeMenu二级树形菜单。分享给大家供大家参考。具体如下: 这是一款二级树形菜单示例:CSS TreeMenu ,非常漂亮的树形菜单,用在网站右侧比较合适。 运行效果截图如下: 在线演示地址如下:

  • 本文向大家介绍jQuery实现简单二级下拉菜单,包括了jQuery实现简单二级下拉菜单的使用技巧和注意事项,需要的朋友参考一下 html代码 js代码 css代码 最好不要忘记插入jQuery js文件,最好下载最新的。 以上所述就是本文的全部内容了,希望大家能够喜欢。

  • 本文向大家介绍Vue.js组件tree实现无限级树形菜单,包括了Vue.js组件tree实现无限级树形菜单的使用技巧和注意事项,需要的朋友参考一下 分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下。 代码看这里喽: html代码: js代码: 效果图: 本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。 关于vue.js组件的教程

  • 本文向大家介绍JavaScript实现简单的二级导航菜单实例,包括了JavaScript实现简单的二级导航菜单实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript实现简单的二级导航菜单的方法。分享给大家供大家参考。具体如下: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍javascript实现二级级联菜单的简单制作,包括了javascript实现二级级联菜单的简单制作的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript实现二级级联菜单的简单制作方法。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: 希望本文所述对大家学习javascript程序设计有所帮助。

  • 本文向大家介绍vue实现树形菜单效果,包括了vue实现树形菜单效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue实现树形菜单效果展示的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。