jQuery多级弹出菜单插件ZoneMenu


Posted in Javascript onDecember 18, 2014

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="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>

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

Javascript 相关文章推荐
Javascript开发包大全整理
Dec 22 Javascript
use jscript Create a SQL Server database
Jun 16 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 #Javascript
jQuery实现视频作为全屏幕背景
Dec 18 #Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 #Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 #Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 #Javascript
JavaScript获取Url里的参数
Dec 18 #Javascript
Javascript实现单张图片浏览
Dec 18 #Javascript
You might like
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
JS画线(实例代码)
2013/11/20 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
微信小程序如何使用globalData的方法
2019/06/06 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
pandas的qcut()方法详解
2019/07/06 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
大学三年的自我评价
2013/12/25 职场文书
工地门卫岗位职责
2013/12/30 职场文书
销售代理协议书
2014/09/30 职场文书
邀请函的格式
2015/01/30 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
Python anaconda安装库命令详解
2021/10/16 Python
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers