jQuery多级弹出菜单插件ZoneMenu
ZoneMenu是一个菜单jQuery插件，只需占用页面上的一个小区域，却可以实现多级菜单。
完整HTML文件代码：
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>ZoneMenu-jqueryplugin</title>
<basetarget="_blank"/>
<scripttype="text/javascript"src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<linkhref="http://keleyi.com/jq/zonemenu/css/jquery.zonemenu.css"type="text/css"rel="stylesheet"/>
<scripttype="text/javascript"src="http://keleyi.com/jq/zonemenu/js/jquery.zonemenu.js"></script>
</head>
<body>
<divstyle="width:200px;margin:10pxauto;">
<h2>
ZoneMenuDemo</h2>
</div>
<divstyle="width:800px;margin:0pxauto;">
<divid="zonemenu"class="zonemenu"style="float:left">
<spanclass="zonemenutitle"><ahref="http://xxx.com/jq/zonemenu/">ZoneMenu</a>
</span>
<divid="zonebody">
<ul>
<li><strong><ahref="http://xxx.com/">xxxHome</a></strong></li>
<li><ahref="http://xxx.com/menu/webqd/">WebFront</a>
<ul>
<li><ahref="http://xxx.com/menu/jquery/">jQuery</a></li>
<li><ahref="http://xxx.com/menu/javascript/">Javascript</a></li>
<li><ahref="http://xxx.com/menu/html5/">HTML5</a></li>
<li><ahref="http://xxx.com/xilie/klyjs/">jsbook</a></li>
<li><ahref="http://xxx.com/ziliao/googlejavascriptstyle.htm">GoogleJavaScript</a></li>
</ul>
</li>
<li><ahref="http://xxx.com/game/">OnlineWebGame</a>
<ul>
<li><ahref="http://xxx.com/game/1/">捕鱼</a></li>
<li><ahref="http://xxx.com/game/2/">不上不下</a></li>
<li><ahref="http://xxx.com/game/4/">美女拼图</a></li>
<li><ahref="http://xxx.com/xxx/phtml/duanwu/index.htm">赛龙舟</a></li>
<li><ahref="http://xxx.com/game/5/">俄罗斯方块</a></li>
<li><ahref="http://xxx.com/game/7/">浏览器射击</a></li>
<li><ahref="http://xxx.com/game/9/1/saolei.htm">扫雷(容易版)</a></li>
<li><ahref="http://xxx.com/game/9/1/">MineSweeper</a></li>
<li><ahref="http://xxx.com/xxx/phtml/silverlight/">GuessNumber</a></li>
<li><ahref="http://xxx.com/game/10/">贪食蛇</a></li>
<li><ahref="http://xxx.com/game/12/">五子棋</a></li>
<li><ahref="http://xxx.com/game/13/">在线桌球</a></li>
<li><ahref="http://xxx.com/game/14/">数字拼图</a></li>
</ul>
</li>
<li><ahref="http://xxx.com/map/">MoreConent</a>
<ul>
<li><ahref="http://tool.xxx.com">Tools</a>
<ul>
<li><ahref="http://xxx.com/tool/md5.htm">MD5加密</a></li>
<li><ahref="http://xxx.com/tool/htmlencode.htm">HTML编码与解码</a></li>
<li><ahref="http://xxx.com/tool/urldecode.htm">URL编码与解码</a></li>
<li><ahref="http://xxx.com/tool/regex.htm">.NET正则表达式匹配工具</a></li>
<li><ahref="http://xxx.com/ziliao/js/zzbds.htm">JS正则</a></li>
<li><ahref="http://xxx.com/ziliao/unicode/">Unicode字符列表</a></li>
<li><ahref="http://xxx.com/tool/color.htm"title="颜色选择器">颜色选择器</a></li>
</ul>
</li>
<li><ahref="http://xxx.com/xxx/">xxxMenu</a></li>
<li><ahref="http://xxx.com/jq/myslider/">Myslider</a></li>
<li><ahref="http://xxx.com/xxx/phtml/jqtexiao/6.htm">HappyHalloween!</a></li>
<li><ahref="http://xxx.com/xxx/phtml/jqtexiao/7.htm">HappyBirthday!</a></li>
<li><ahref="http://xxx.com/xxx/phtml/jqtexiao/7a.htm">HappyChristmas!</a></li>
</ul>
</li>
</ul>
</div>
</div>
<divstyle="float:right;border:1pxsolid#999;font-size:20px;height:40px;
line-height:40px;width:590px">
WelcometoZoneMenuHome!ZoneMenuisajQueryplugin.</div>
</div>
<scripttype="text/javascript">
$("#zonemenu").zonemenu();
</script>
</body>
</html>
代码很简单，这里就不详细说明了，小伙伴们自己看吧