jQuery多级弹出菜单插件ZoneMenu

前端技术 2023/09/04 JavaScript

ZoneMenu是一个菜单jQuery插件，只需占用页面上的一个小区域，却可以实现多级菜单。

完整HTML文件代码：

http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js\"></script>
<link href=\"http://keleyi.com/jq/zonemenu/css/jquery.zonemenu.css\" type=\"text/css\" rel=\"stylesheet\" />
<script type=\"text/javascript\" src=\"http://keleyi.com/jq/zonemenu/js/jquery.zonemenu.js\"></script>
</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=\"http://xxx.com/jq/zonemenu/\">ZoneMenu</a>
</span>
<div id=\"zonebody\">
<ul>
<li><strong><a href=\"http://xxx.com/\">xxx Home</a></strong></li>
<li><a href=\"http://xxx.com/menu/webqd/\">WebFront</a>
<ul>
<li><a href=\"http://xxx.com/menu/jquery/\">jQuery</a></li>
<li><a href=\"http://xxx.com/menu/javascript/\">Javascript</a></li>
<li><a href=\"http://xxx.com/menu/html5/\">HTML5</a></li>
<li><a href=\"http://xxx.com/xilie/klyjs/\">js book</a></li>
<li><a href=\"http://xxx.com/ziliao/googlejavascriptstyle.htm\">Google JavaScript</a></li>
</ul>
</li>
<li><a href=\"http://xxx.com/game/\">Online Web Game</a>
<ul>
<li><a href=\"http://xxx.com/game/1/\">捕鱼</a> </li>
<li><a href=\"http://xxx.com/game/2/\">不上不下</a> </li>
<li><a href=\"http://xxx.com/game/4/\">美女拼图</a> </li>
<li><a href=\"http://xxx.com/xxx/phtml/duanwu/index.htm\">赛龙舟</a> </li>
<li><a href=\"http://xxx.com/game/5/\">俄罗斯方块</a> </li>
<li><a href=\"http://xxx.com/game/7/\">浏览器射击</a> </li>
<li><a href=\"http://xxx.com/game/9/1/saolei.htm\">扫雷(容易版)</a></li>
<li><a href=\"http://xxx.com/game/9/1/\">Mine Sweeper</a></li>
<li><a href=\"http://xxx.com/xxx/phtml/silverlight/\">Guess Number</a> </li>
<li><a href=\"http://xxx.com/game/10/\">贪食蛇</a> </li>
<li><a href=\"http://xxx.com/game/12/\">五子棋</a> </li>
<li><a href=\"http://xxx.com/game/13/\">在线桌球</a> </li>
<li><a href=\"http://xxx.com/game/14/\">数字拼图</a> </li>
</ul>
</li>
<li><a href=\"http://xxx.com/map/\">More Conent</a>
<ul>
<li><a href=\"http://tool.xxx.com\">Tools</a>
<ul>
<li><a href=\"http://xxx.com/tool/md5.htm\">MD5加密</a></li>
<li><a href=\"http://xxx.com/tool/htmlencode.htm\">HTML编码与解码</a></li>
<li><a href=\"http://xxx.com/tool/urldecode.htm\">URL编码与解码</a></li>
<li><a href=\"http://xxx.com/tool/regex.htm\">.NET正则表达式匹配工具</a></li>
<li><a href=\"http://xxx.com/ziliao/js/zzbds.htm\">JS正则</a></li>
<li><a href=\"http://xxx.com/ziliao/unicode/\">Unicode字符列表</a></li>
<li><a href=\"http://xxx.com/tool/color.htm\" title=\"颜色选择器\">颜色选择器</a></li>
</ul>
</li>
<li><a href=\"http://xxx.com/xxx/\">xxx Menu</a></li>
<li><a href=\"http://xxx.com/jq/myslider/\">Myslider</a></li>
<li><a href=\"http://xxx.com/xxx/phtml/jqtexiao/6.htm\">Happy Halloween!</a></li>
<li><a href=\"http://xxx.com/xxx/phtml/jqtexiao/7.htm\">Happy Birthday!</a></li>
<li><a href=\"http://xxx.com/xxx/phtml/jqtexiao/7a.htm\">Happy 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>

代码很简单，这里就不详细说明了，小伙伴们自己看吧

本文地址：https://www.stayed.cn/item/10955

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案