hovertree插件實(shí)現(xiàn)二級(jí)樹(shù)形菜單(簡(jiǎn)單實(shí)用)
hovertree是一個(gè)仿京東的樹(shù)形菜單jquery插件,暫時(shí)有銀色和綠色兩種。
下載網(wǎng)址:http://wd.jb51.net:81//201612/yuanma/hovertree-0.1.2_jb51.rar
可以設(shè)置菜單寬度(width),還可以設(shè)置是否最多只能有一個(gè)一級(jí)菜單展開(kāi)(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>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
jQuery中removeAttr()方法用法實(shí)例
這篇文章主要介紹了jQuery中removeAttr()方法用法,實(shí)例分析了removeAttr()方法的功能、定義及從匹配元素中移除相應(yīng)屬性的使用技巧,需要的朋友可以參考下2015-01-01jQuery模擬新浪微博首頁(yè)滾動(dòng)效果的方法
這篇文章主要介紹了jQuery模擬新浪微博首頁(yè)滾動(dòng)效果的方法,實(shí)例分析了jQuery使用animate、css等方法實(shí)現(xiàn)滾動(dòng)特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03純CSS打造的導(dǎo)航菜單(附j(luò)query版)
使用CSS 制作導(dǎo)航菜單,實(shí)際主要是利用了css的li a屬性,對(duì)于以后用css制作更絢麗的效果提高了很好的參考。2010-08-08jQuery學(xué)習(xí)筆記 更改jQuery對(duì)象
jQuery提供了一些方法,使流程變?yōu)樯蒵Query對(duì)象A,操作jQuery對(duì)象A;更改為jQuery對(duì)象B,操作jQuery對(duì)象B2012-09-09Jquery 動(dòng)態(tài)添加元素并添加點(diǎn)擊事件實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了Jquery 動(dòng)態(tài)添加元素并添加點(diǎn)擊事件實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10jQuery查找和過(guò)濾_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery查找和過(guò)濾的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07jQuery中[attribute!=value]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute!=value]選擇器用法,實(shí)例分析了[attribute!=value]選擇器匹配不包含指定屬性元素的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12jQuery插件kinMaxShow擴(kuò)展效果用法實(shí)例
這篇文章主要介紹了jQuery插件kinMaxShow擴(kuò)展效果用法,實(shí)例分析了kinMaxShow擴(kuò)展的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05