Looking at the above effect chart, you may already understand why it is the Imitation jingdong menu. If you do not understand, please visit http://list.jd.com/list.html?cat=9987,653,655 to see the menu on the left. Of course, this hovertree menu is more powerful and can be implemented in an unlimited level menu.
HTML code:
<! DOCTYPE html>
<title>hovertree-jquery Menu Plugin </title>
<base target= "_blank"/>
<link href= "Http://keleyi.com/jq/hovertree/css/jquery.hovertree.0.1.2.min.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.0.1.2.min.js "></script>
<body>
<div style= "WIDTH:234PX; margin-left:30px; " >
<div>
Hovertree Menu 0.1.2</div>
<div style= "width:200px;" >
<div id= "Keleyihovertree" class= "Hovertree" >
<div class= "Hovertreeitem hvtcurrent" >
<b></b><a href= "http://keleyi.com/list/" > Articles List </a><ul>
<li><a href= "jqueryhttp://keleyi.com/menu/jquery/">jquery</a></li>
<li><a href= "folder" >http://keleyi.com ">folder 2</a>
<ul>
<li><a href= "Sub" >http://keleyi.com ">sub Item 2.1</a></li>
<li><a href= "folder" >http://keleyi.com ">folder 2.2</a>
<ul>
<li><a href= "Sub" >http://keleyi.com ">sub Item 2.2.1</a></li>
<li><a href= "Sub" >http://keleyi.com ">sub Item 2.2.2</a></li>
<li><a href= "folder" >http://keleyi.com ">folder 2.2.3</a>
<ul>
<li><a href= "Sub" >http://keleyi.com ">sub Item 2.2.3.1</a></li>
<li><a href= "Sub" >http://keleyi.com ">sub Item 2.2.3.2</a></li>
<li><a href= "Sub" >http://keleyi.com ">sub Item 2.2.3.3</a></li>
<li><a href= "Sub" >http://keleyi.com ">sub Item 2.2.3.4</a></li>
<li><a href= "Sub" >http://keleyi.com ">sub Item 2.2.3.5</a></li>
</ul>
</li>
<li><a href= "Sub" >http://keleyi.com ">sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "javascripthttp://keleyi.com/menu/javascript/">javascript</a></li>
<li><a href= "HTML5http://keleyi.com/menu/html5/">html5</a></li>
<li><a href= "web" >http://keleyi.com/menu/webqd/">web front-end </a></li>
<li><a href= "JQuery" >http://keleyi.com/jq/">jquery plugin </a></li>
</ul>
</div>
<div>
<b></b><a href= "JQuery" >http://keleyi.com/jq/">jquery plugins</a><ul>
<li><a href= "keleyi" >http://keleyi.com/keleyi/">keleyi menu </a></li>
<li><a href= "Randomvisithttp://keleyi.com/jq/randomvisit/">RandomVisit</a></li>
<li><a href= "Zonemenu" >http://keleyi.com/jq/zonemenu/">zonemenu menu </a></li>
<li><a href= "Mysliderhttp://keleyi.com/jq/myslider/">myslider</a></li>
<li><a href= "Hovertreehttp://keleyi.com/jq/hovertree/">hovertree</a></li>
</ul>
</div>
<div class= "Hovertreeitem" >
<b></b><a href= "http://tool.keleyi.com" > Tools </a><ul>
<li><a href= "http://tool.keleyi.com/t/md5.htm" >MD5 encryption </a></li>
<li><a href= "MD5" >http://keleyi.com/tool/md5.htm >md5 encryption (Silverlight) </a></li>
<li><a href= "HTML" >http://keleyi.com/tool/htmlencode.htm ">html encoding and decoding </a></li>
<li><a href= "URL" >http://keleyi.com/tool/urldecode.htm ">url encoding and decoding </a></li>
<li><a href= ". NET" >http://keleyi.com/tool/regex.htm ". NET regular expression matching tool </a></li>
<li><a href= "http://tool.keleyi.com/ip/wodeip.htm" > View IP Address </a></li>
</ul>
</div>
<div>
<b></b><a href= "asp.nethttp://keleyi.com/menu/aspnet/">ASP.NET</a></div>
</div>
</div>
<a href= "http://keleyi.com/jq/hovertree/demo/demo.0.1.0.htm" > Previous version </a> <a href= "http:// plugins.jquery.com/hovertree/">
Download</a>
</div>
<script type= "Text/javascript" >
$ ("#keleyihovertree"). Hovertree ({"width": "Keleyi", "initstatus": ' Keleyi '});
</script>
</body>
