原創
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