hovertree插件實現(xià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)文章
純CSS打造的導(dǎo)航菜單(附j(luò)query版)
使用CSS 制作導(dǎo)航菜單,實際主要是利用了css的li a屬性,對于以后用css制作更絢麗的效果提高了很好的參考。2010-08-08jQuery學(xué)習(xí)筆記 更改jQuery對象
jQuery提供了一些方法,使流程變?yōu)樯蒵Query對象A,操作jQuery對象A;更改為jQuery對象B,操作jQuery對象B2012-09-09Jquery 動態(tài)添加元素并添加點擊事件實現(xiàn)過程解析
這篇文章主要介紹了Jquery 動態(tài)添加元素并添加點擊事件實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10jQuery查找和過濾_動力節(jié)點節(jié)點Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery查找和過濾的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07jQuery中[attribute!=value]選擇器用法實例
這篇文章主要介紹了jQuery中[attribute!=value]選擇器用法,實例分析了[attribute!=value]選擇器匹配不包含指定屬性元素的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12jQuery插件kinMaxShow擴(kuò)展效果用法實例
這篇文章主要介紹了jQuery插件kinMaxShow擴(kuò)展效果用法,實例分析了kinMaxShow擴(kuò)展的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05