- 时间：2021-05-13 06:32 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：jQuery多级弹出菜单插件ZoneMenu
ZoneMenu是一个菜单jQuery插件，只需占用页面上的一个小区域，却可以实现多级菜单。
完整HTML文件代码：
[url=http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script]http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script[/url]>
<link href="[url=http://keleyi.com/jq/zonemenu/css/jquery.zonemenu.css]http://keleyi.com/jq/zonemenu/css/jquery.zonemenu.css[/url]" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="[url=http://keleyi.com/jq/zonemenu/js/jquery.zonemenu.js"></script]http://keleyi.com/jq/zonemenu/js/jquery.zonemenu.js"></script[/url]>
</head>
<body>
<div style="width: 200px; margin: 10px auto;">
<h2>
ZoneMenu Demo</h2>
</div>
<div style="width: 800px; margin: 0px auto;">
<div id="zonemenu" class="zonemenu" style="float: left">
<span class="zonemenutitle"><a href="[url=http://xxx.com/jq/zonemenu/">ZoneMenu</a]http://xxx.com/jq/zonemenu/">ZoneMenu</a[/url]>
</span>
<div id="zonebody">
<ul>
<li><strong><a href="[url=http://xxx.com/">xxx]http://xxx.com/">xxx[/url] Home</a></strong></li>
<li><a href="[url=http://xxx.com/menu/webqd/">WebFront</a]http://xxx.com/menu/webqd/">WebFront</a[/url]>
<ul>
<li><a href="[url=http://xxx.com/menu/jquery/">jQuery</a></li]http://xxx.com/menu/jquery/">jQuery</a></li[/url]>
<li><a href="[url=http://xxx.com/menu/javascript/">Javascript</a></li]http://xxx.com/menu/javascript/">Javascript</a></li[/url]>
<li><a href="[url=http://xxx.com/menu/html5/">HTML5</a></li]http://xxx.com/menu/html5/">HTML5</a></li[/url]>
<li><a href="[url=http://xxx.com/xilie/klyjs/">js]http://xxx.com/xilie/klyjs/">js[/url] book</a></li>
<li><a href="[url=http://xxx.com/ziliao/googlejavascriptstyle.htm">Google]http://xxx.com/ziliao/googlejavascriptstyle.htm">Google[/url] JavaScript</a></li>
</ul>
</li>
<li><a href="[url=http://xxx.com/game/">Online]http://xxx.com/game/">Online[/url] Web Game</a>
<ul>
<li><a href="[url=http://xxx.com/game/1/]http://xxx.com/game/1/[/url]">捕鱼</a> </li>
<li><a href="[url=http://xxx.com/game/2/]http://xxx.com/game/2/[/url]">不上不下</a> </li>
<li><a href="[url=http://xxx.com/game/4/]http://xxx.com/game/4/[/url]">美女拼图</a> </li>
<li><a href="[url=http://xxx.com/xxx/phtml/duanwu/index.htm]http://xxx.com/xxx/phtml/duanwu/index.htm[/url]">赛龙舟</a> </li>
<li><a href="[url=http://xxx.com/game/5/]http://xxx.com/game/5/[/url]">俄罗斯方块</a> </li>
<li><a href="[url=http://xxx.com/game/7/]http://xxx.com/game/7/[/url]">浏览器射击</a> </li>
<li><a href="[url=http://xxx.com/game/9/1/saolei.htm]http://xxx.com/game/9/1/saolei.htm[/url]">扫雷(容易版)</a></li>
<li><a href="[url=http://xxx.com/game/9/1/">Mine]http://xxx.com/game/9/1/">Mine[/url] Sweeper</a></li>
<li><a href="[url=http://xxx.com/xxx/phtml/silverlight/">Guess]http://xxx.com/xxx/phtml/silverlight/">Guess[/url] Number</a> </li>
<li><a href="[url=http://xxx.com/game/10/]http://xxx.com/game/10/[/url]">贪食蛇</a> </li>
<li><a href="[url=http://xxx.com/game/12/]http://xxx.com/game/12/[/url]">五子棋</a> </li>
<li><a href="[url=http://xxx.com/game/13/]http://xxx.com/game/13/[/url]">在线桌球</a> </li>
<li><a href="[url=http://xxx.com/game/14/]http://xxx.com/game/14/[/url]">数字拼图</a> </li>
</ul>
</li>
<li><a href="[url=http://xxx.com/map/">More]http://xxx.com/map/">More[/url] Conent</a>
<ul>
<li><a href="[url=http://tool.xxx.com">Tools</a]http://tool.xxx.com">Tools</a[/url]>
<ul>
<li><a href="[url=http://xxx.com/tool/md5.htm">MD5]http://xxx.com/tool/md5.htm">MD5[/url]加密</a></li>
<li><a href="[url=http://xxx.com/tool/htmlencode.htm">HTML]http://xxx.com/tool/htmlencode.htm">HTML[/url]编码与解码</a></li>
<li><a href="[url=http://xxx.com/tool/urldecode.htm">URL]http://xxx.com/tool/urldecode.htm">URL[/url]编码与解码</a></li>
<li><a href="[url=http://xxx.com/tool/regex.htm">.NET]http://xxx.com/tool/regex.htm">.NET[/url]正则表达式匹配工具</a></li>
<li><a href="[url=http://xxx.com/ziliao/js/zzbds.htm">JS]http://xxx.com/ziliao/js/zzbds.htm">JS[/url]正则</a></li>
<li><a href="[url=http://xxx.com/ziliao/unicode/">Unicode]http://xxx.com/ziliao/unicode/">Unicode[/url]字符列表</a></li>
<li><a href="[url=http://xxx.com/tool/color.htm]http://xxx.com/tool/color.htm[/url]" title="颜色选择器">颜色选择器</a></li>
</ul>
</li>
<li><a href="[url=http://xxx.com/xxx/">xxx]http://xxx.com/xxx/">xxx[/url] Menu</a></li>
<li><a href="[url=http://xxx.com/jq/myslider/">Myslider</a></li]http://xxx.com/jq/myslider/">Myslider</a></li[/url]>
<li><a href="[url=http://xxx.com/xxx/phtml/jqtexiao/6.htm">Happy]http://xxx.com/xxx/phtml/jqtexiao/6.htm">Happy[/url] Halloween!</a></li>
<li><a href="[url=http://xxx.com/xxx/phtml/jqtexiao/7.htm">Happy]http://xxx.com/xxx/phtml/jqtexiao/7.htm">Happy[/url] Birthday!</a></li>
<li><a href="[url=http://xxx.com/xxx/phtml/jqtexiao/7a.htm">Happy]http://xxx.com/xxx/phtml/jqtexiao/7a.htm">Happy[/url] Christmas!</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style="float: right; border: 1px solid #999; font-size: 20px; height: 40px;
line-height: 40px; width: 590px">
Welcome to ZoneMenu Home! ZoneMenu is a jQuery plugin.</div>
</div>
<script type="text/javascript">
$("#zonemenu").zonemenu();
</script>
</body>
</html>
代码很简单，这里就不详细说明了，小伙伴们自己看吧
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
