jQuery多級(jí)彈出菜單插件ZoneMenu
更新時(shí)間：2014年12月18日 14:56:21 投稿：hebedich
這篇文章主要介紹了jQuery多級(jí)彈出菜單插件ZoneMenu的使用方法，有需要的小伙伴可以參考下
ZoneMenu是一個(gè)菜單jQuery插件，只需占用頁(yè)面上的一個(gè)小區(qū)域，卻可以實(shí)現(xiàn)多級(jí)菜單。
完整HTML文件代碼：
復(fù)制代碼 代碼如下:
<!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=">
<link href=" <script type="text/javascript" src=">
</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=">
</span>
<div id="zonebody">
<ul>
<li><strong><a href=" Home</a></strong></li>
<li><a href=">
<ul>
<li><a href=">
<li><a href=">
<li><a href=">
<li><a href=" book</a></li>
<li><a href=" JavaScript</a></li>
</ul>
</li>
<li><a href=" Web Game</a>
<ul>
<li><a href=" <li><a href=" <li><a href=" <li><a href=" <li><a href=" <li><a href=" <li><a href=" <li><a href=" Sweeper</a></li>
<li><a href=" Number</a> </li>
<li><a href=" <li><a href=" <li><a href=" <li><a href=" </ul>
</li>
<li><a href=" Conent</a>
<ul>
<li><a href=">
<ul>
<li><a href="加密</a></li>
<li><a href="編碼與解碼</a></li>
<li><a href="編碼與解碼</a></li>
<li><a href="正則表達(dá)式匹配工具</a></li>
<li><a href="正則</a></li>
<li><a href="字符列表</a></li>
<li><a href=" </ul>
</li>
<li><a href=" Menu</a></li>
<li><a href=">
<li><a href=" Halloween!</a></li>
<li><a href=" Birthday!</a></li>
<li><a href=" 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>
代碼很簡(jiǎn)單，這里就不詳細(xì)說(shuō)明了，小伙伴們自己看吧
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)漸變彈出層和彈出菜單的方法
- jquery 插件之仿“卓越亞馬遜”首頁(yè)彈出菜單效果
- jQuery實(shí)現(xiàn)可用于博客的動(dòng)態(tài)滑動(dòng)菜單完整實(shí)例
- jquery實(shí)現(xiàn)仿Flash的橫向滑動(dòng)菜單效果代碼
- jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級(jí)導(dǎo)航菜單效果完整實(shí)例
- jQuery實(shí)現(xiàn)折疊、展開(kāi)的菜單組效果代碼
- jQuery實(shí)現(xiàn)兩款有動(dòng)畫(huà)功能的導(dǎo)航菜單代碼
- jquery實(shí)現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果
相關(guān)文章
validate是一款很好的jq插件,提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來(lái)編寫(xiě)用戶自定義方法的 API。2014-11-11
本文給大家講解的是使用jQuery檢測(cè)某個(gè)元素是否存在的代碼和思路，十分的實(shí)用，有需要的小伙伴可以參考下。2015-07-07
jQuery制作input提示內(nèi)容（兼容IE8以上）
這篇文章主要為大家詳細(xì)介紹了jQuery制作input提示內(nèi)容，兼容IE8以上，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
jquery實(shí)現(xiàn)table鼠標(biāo)經(jīng)過(guò)變色代碼
table鼠標(biāo)經(jīng)過(guò)變色的效果想必大家都有見(jiàn)到過(guò)吧，其實(shí)實(shí)現(xiàn)很簡(jiǎn)單，在本文有個(gè)不錯(cuò)的示例，感興趣的朋友可以學(xué)習(xí)下2013-09-09
氣泡默認(rèn)出現(xiàn)在觸發(fā)對(duì)象的正上方,當(dāng)觸發(fā)對(duì)象在邊上時(shí),氣泡會(huì)有一部分出現(xiàn)在窗口外面2010-05-05
jquery用get實(shí)現(xiàn)ajax在ie里面刷新不進(jìn)入后臺(tái)解決方法
jquery用get實(shí)現(xiàn)ajax在ie里面刷新不進(jìn)入后臺(tái)的情況想必大家都有遇到過(guò)吧，下面與大家分享下具體的解決方法，希望對(duì)大家解決問(wèn)題有所幫助2013-08-08
jquery 獲取自定義屬性(attr和prop)的實(shí)現(xiàn)代碼
jquery中用attr()方法來(lái)獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫(xiě)，在jQuery DOM操作中會(huì)經(jīng)常用到attr()，attr()有4個(gè)表達(dá)式2012-06-06
有些WEB開(kāi)發(fā)者，會(huì)引用一個(gè)JQuery類庫(kù)，然后在網(wǎng)頁(yè)上寫(xiě)一寫(xiě)$("#")，$(".")，寫(xiě)了幾年就對(duì)別人說(shuō)非常熟悉JQuery。其實(shí)你只是了解一點(diǎn)皮毛，并不知道其中的道理，下面通過(guò)本篇文章給大家介紹jquery定義插件的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了jQuery中add()方法用法,實(shí)例分析了add()方法的功能、定義及匹配元素中添加與表達(dá)式匹配的元素使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要分享jQuery實(shí)現(xiàn)地圖map懸停顯示省市代碼,需要的朋友可以參考下2015-08-08