欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery多级弹出菜单插件ZoneMenu

程序员文章站 2022-05-06 23:06:41
zonemenu是一个菜单jquery插件,只需占用页面上的一个小区域,却可以实现多级菜单。 完整html文件代码: 代码如下:

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

完整html文件代码:

代码如下:


<!doctype html >
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>zonemenu- jquery plugin</title>
<base target="_blank" />
<script type="text/javascript" src="https://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<link href="https://keleyi.com/jq/zonemenu/css/jquery.zonemenu.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://keleyi.com/jq/zonemenu/js/jquery.zonemenu.js"></script>
</head>
<body>
<p style="width: 200px; margin: 10px auto;">
<h2>
zonemenu demo</h2>
</p>
<p style="width: 800px; margin: 0px auto;">
<p id="zonemenu" class="zonemenu" style="float: left">
<span class="zonemenutitle"><a href="https://xxx.com/jq/zonemenu/">zonemenu</a>
</span>
<p id="zonebody">
<ul>
<li><strong><a href="https://xxx.com/">xxx home</a></strong></li>
<li><a href="https://xxx.com/menu/webqd/">webfront</a>
<ul>
<li><a href="https://xxx.com/menu/jquery/">jquery</a></li>
<li><a href="https://xxx.com/menu/javascript/">javascript</a></li>
<li><a href="https://xxx.com/menu/html5/">html5</a></li>
<li><a href="https://xxx.com/xilie/klyjs/">js book</a></li>
<li><a href="https://xxx.com/ziliao/googlejavascriptstyle.htm">google javascript</a></li>
</ul>
</li>
<li><a href="https://xxx.com/game/">online web game</a>
<ul>
<li><a href="https://xxx.com/game/1/">捕鱼</a> </li>
<li><a href="https://xxx.com/game/2/">不上不下</a> </li>
<li><a href="https://xxx.com/game/4/">美女拼图</a> </li>
<li><a href="https://xxx.com/xxx/phtml/duanwu/index.htm">赛龙舟</a> </li>
<li><a href="https://xxx.com/game/5/">俄罗斯方块</a> </li>
<li><a href="https://xxx.com/game/7/">射击</a> </li>
<li><a href="https://xxx.com/game/9/1/saolei.htm">扫雷(容易版)</a></li>
<li><a href="https://xxx.com/game/9/1/">mine sweeper</a></li>
<li><a href="https://xxx.com/xxx/phtml/silverlight/">guess number</a> </li>
<li><a href="https://xxx.com/game/10/">贪食蛇</a> </li>
<li><a href="https://xxx.com/game/12/">五子棋</a> </li>
<li><a href="https://xxx.com/game/13/">在线桌球</a> </li>
<li><a href="https://xxx.com/game/14/">数字拼图</a> </li>
</ul>
</li>
<li><a href="https://xxx.com/map/">more conent</a>
<ul>
<li><a href="https://tool.xxx.com">tools</a>
<ul>
<li><a href="https://xxx.com/tool/md5.htm">md5</a></li>
<li><a href="https://xxx.com/tool/htmlencode.htm">html编码与解码</a></li>
<li><a href="https://xxx.com/tool/urldecode.htm">url编码与解码</a></li>
<li><a href="https://xxx.com/tool/regex.htm">.net正则表达式匹配工具</a></li>
<li><a href="https://xxx.com/ziliao/js/zzbds.htm">js正则</a></li>
<li><a href="https://xxx.com/ziliao/unicode/">unicode字符列表</a></li>
<li><a href="https://xxx.com/tool/color.htm" title="颜色选择器">颜色选择器</a></li>
</ul>
</li>
<li><a href="https://xxx.com/xxx/">xxx menu</a></li>
<li><a href="https://xxx.com/jq/myslider/">myslider</a></li>
<li><a href="https://xxx.com/xxx/phtml/jqtexiao/6.htm">happy halloween!</a></li>
<li><a href="https://xxx.com/xxx/phtml/jqtexiao/7.htm">happy birthday!</a></li>
<li><a href="https://xxx.com/xxx/phtml/jqtexiao/7a.htm">happy christmas!</a></li>
</ul>
</li>
</ul>
</p>
</p>
<p 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.</p>
</p>
<script type="text/javascript">
$("#zonemenu").zonemenu();
</script>
</body>
</html>