hovertree插件實(shí)現(xiàn)二級樹形菜單（簡單實(shí)用）

更新時間：2016年12月28日 11:14:38 作者：計(jì)劃

hovertree是一個仿京東的樹形菜單jquery插件，暫時有銀色和綠色兩種。本文將對此進(jìn)行介紹。具有一定的參考價值，下面跟著小編一起來看下吧

hovertree是一個仿京東的樹形菜單jquery插件，暫時有銀色和綠色兩種。

下載網(wǎng)址：http://wd.jb51.net:81//201612/yuanma/hovertree-0.1.2_jb51.rar

可以設(shè)置菜單寬度(width)，還可以設(shè)置是否最多只能有一個一級菜單展開(isCloseOther)。

isCloseOther的值為false 或者 true，設(shè)為true即成為手風(fēng)琴菜單。

使用方法可以參考以下HTML源代碼：

<!DOCTYPE html>
<html>
<head>
<title>hovertree</title><base target="_blank" />
<link  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 >jquery</a></li>
<li><a >javascript</a></li>
<li><a >html5</a></li>
<li><a >web前端</a></li>
<li><a >jQuery插件</a></li>
</ul>
</div>
<div class="item">
<h3>
<b></b>jQuery Plugins</h3>
<ul>
<li><a >keleyi菜單</a></li>
<li><a >RandomVisit</a></li>
<li><a >ZoneMenu菜單</a></li>
<li><a >myslider</a></li>
<li><a >hovertree</a></li>
</ul>
</div>
<div class="item">
<h3>
<b></b>工具</h3>
<ul>
<li><a >MD5加密</a></li>
<li><a >MD5加密（Silverlight）</a></li>
<li><a >HTML編碼與解碼</a></li>
<li><a >URL編碼與解碼</a></li>
<li><a >.NET正則表達(dá)式匹配工具</a></li>
<li><a >查看IP地址</a></li>
</ul>
</div>
</div>
<a href="hovertreegreen.htm">Green Style</a> <a >download</a>
<script type="text/javascript">
$("#keleyihovertree").hovertree({ "width": "200px"});
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

jQuery中removeAttr()方法用法實(shí)例
這篇文章主要介紹了jQuery中removeAttr()方法用法,實(shí)例分析了removeAttr()方法的功能、定義及從匹配元素中移除相應(yīng)屬性的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery模擬新浪微博首頁滾動效果的方法
這篇文章主要介紹了jQuery模擬新浪微博首頁滾動效果的方法,實(shí)例分析了jQuery使用animate、css等方法實(shí)現(xiàn)滾動特效的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
純CSS打造的導(dǎo)航菜單(附j(luò)query版)
使用CSS 制作導(dǎo)航菜單，實(shí)際主要是利用了css的li a屬性，對于以后用css制作更絢麗的效果提高了很好的參考。
2010-08-08
jQuery學(xué)習(xí)筆記更改jQuery對象
jQuery提供了一些方法，使流程變?yōu)樯蒵Query對象A，操作jQuery對象A；更改為jQuery對象B，操作jQuery對象B
2012-09-09
Jquery 動態(tài)添加元素并添加點(diǎn)擊事件實(shí)現(xiàn)過程解析
這篇文章主要介紹了Jquery 動態(tài)添加元素并添加點(diǎn)擊事件實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-10-10
jQuery查找和過濾_動力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery查找和過濾的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
npm 安裝jquery及使用教程
本文將介紹如何使用npm安裝和使用jQuery,幫助讀者解決相關(guān)問題,并提供示例代碼,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
淺談jQuery框架Ajax常用選項(xiàng)
下面小編就為大家?guī)硪黄獪\談jQuery框架Ajax常用選項(xiàng)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
jQuery中[attribute!=value]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute!=value]選擇器用法,實(shí)例分析了[attribute!=value]選擇器匹配不包含指定屬性元素的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12
jQuery插件kinMaxShow擴(kuò)展效果用法實(shí)例
這篇文章主要介紹了jQuery插件kinMaxShow擴(kuò)展效果用法,實(shí)例分析了kinMaxShow擴(kuò)展的使用技巧,非常具有實(shí)用價值,需要的朋友可以參考下
2015-05-05