jQuery 멀티 팝업 메뉴 플러그인 ZoneMenu

Zone Menu는 메뉴 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="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>
코드가 간단한데 여기서는 상세하게 설명하지 않으니 친구들이 직접 보세요

좋은 웹페이지 즐겨찾기