jQuery多級彈出菜單插件ZoneMenu
ZoneMenu是一個菜單jQuery插件,只需占用頁面上的一個小區(qū)域,卻可以實現(xiàn)多級菜單。
完整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=">
<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="正則表達式匹配工具</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>
代碼很簡單,這里就不詳細說明了,小伙伴們自己看吧
相關(guān)文章
jQuery動態(tài)生成不規(guī)則表格(前后端)
這篇文章主要介紹了jQuery動態(tài)生成不規(guī)則表格的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-02-02jQueryUI 拖放排序遇到滾動條時有可能無法執(zhí)行排序的小bug及解決方案
前些日子不是在做使用Jquery-UI實現(xiàn)一次拖拽多個選中的元素操作嘛,在持續(xù)完善這個組件時遇到了一個關(guān)于拖放排序的bug。今天就著圖片和代碼重現(xiàn)一下,也順便告訴大家如何解決這個問題2016-12-12JQuery插件iScroll實現(xiàn)下拉刷新,滾動翻頁特效
下拉自動加載進行分頁的運用越來越多,比起傳統(tǒng)的分頁該方法分頁用戶體驗更好,布局也更簡單了。目前正在使用和學(xué)習(xí)中……2014-06-06基于jquery實現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果
基于jquery實現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果的實現(xiàn)代碼,需要的朋友可以參考下。2011-08-08JQuery為textarea添加maxlength屬性的代碼
textarea默認不支持maxlength屬性。所以通過jquery實現(xiàn)下。具體的看代碼。2010-04-04jQuery插件ContextMenu自定義圖標(biāo)
這篇文章主要為大家詳細介紹了jQuery插件ContextMenu自定義圖標(biāo)的相關(guān)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03jQuery 快速結(jié)束當(dāng)前正在執(zhí)行的動畫
要快速結(jié)束一個當(dāng)前正在執(zhí)行的jquery 動畫時可以在執(zhí)行當(dāng)前動畫的對象上執(zhí)行 stop(true)方法,下面有個不錯的示例感興趣的朋友不要錯過2013-11-11