jQuery多级弹出菜单插件ZoneMenu

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>

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

赞 (0)

相关推荐

  • jquery 插件之仿“卓越亚马逊”首页弹出菜单效果

    复制代码 代码如下: /*弹出式菜单*/ //没剑 2008-07-03 //http://regedit.cnblogs.com /*参数说明*/ //showobj:要显示的菜单ID //timeout:延时时间,鼠标停留/离开后延时多久开始显示/隐藏菜单 //speed:菜单显示速度,数字越大,显示越慢,默认为100 //调用示例:$("#button").DMenu("#content"); jQuery.fn.DMenu=function(showobj,

  • jquery实现隐藏在左侧的弹性弹出菜单效果

    jquery实现隐藏在左侧的弹性弹出菜单效果

    本文实例讲述了jquery实现隐藏在左侧的弹性弹出菜单效果.分享给大家供大家参考.具体如下: 这是一款隐藏在左侧的弹性弹出菜单,从淘宝扣下来的,也可作为JavaScript缓冲动画的典型教程.本弹性菜单可扩展性强,实际上不光可以做成菜单,也可布局一些图文混排的内容或一段视频,总之被弹出的内容是在一段Div内,怎么布置就看你的了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-hidden-alert-adv-codes/

  • jquery实现仿Flash的横向滑动菜单效果代码

    jquery实现仿Flash的横向滑动菜单效果代码

    本文实例讲述了jquery实现仿Flash的横向滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一个仿Flash的jquery滑动菜单,横向,延时效果明显,如果觉得延时太长的话,自己可以修改参数,通过这个菜单主要是想向大家掌握一些jQuery生成动画的技巧,同时这也是jquery强大功能的体现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-flash-style-move-menu-codes/ 具体代码如下: <!

  • jQuery实现可用于博客的动态滑动菜单完整实例

    jQuery实现可用于博客的动态滑动菜单完整实例

    本文实例讲述了jQuery实现可用于博客的动态滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery1.3.2的动态滑动菜单特效代码,常用于博客,鼠标滑过菜单,菜单会不断伸出,貌似很漂亮,我比较喜欢,发上来供大家使用或学习参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blog-move-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//

  • jQuery实现两款有动画功能的导航菜单代码

    jQuery实现两款有动画功能的导航菜单代码

    本文实例讲述了jQuery实现两款有动画功能的导航菜单代码.分享给大家供大家参考.具体如下: 这里介绍两个有动画功能的jQuery导航菜单,每个具备移动背景的效果,第二则是渐变背景效果,两个都不错,根据你的喜好选择了,菜单的风格和颜色自己修改一下就能用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2-animate-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "

  • jQuery实现渐变弹出层和弹出菜单的方法

    本文实例讲述了jQuery实现渐变弹出层和弹出菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • jQuery实现仿美橙互联两级导航菜单效果完整实例

    jQuery实现仿美橙互联两级导航菜单效果完整实例

    本文实例讲述了jQuery实现仿美橙互联两级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的仿美橙互联两级导航菜单,效果不错吧,更像是一个滑动门,不会让你失望的. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-mchl-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

  • jQuery实现折叠、展开的菜单组效果代码

    jQuery实现折叠、展开的菜单组效果代码

    本文实例讲述了jQuery实现折叠.展开的菜单组效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的漂亮的竖向折叠菜单组,初次运行的时候请刷新一下页面,让jQ载入,这款菜单应用广泛,可用到后台左侧,网站前台也可以用,发现自腾讯微博开放平台,分享给大家一起研究吧.提示:如果有错误,请刷新页面. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-group-codes/ 具体代码如下:

  • jQuery多级弹出菜单插件ZoneMenu

    ZoneMenu是一个菜单jQuery插件,只需占用页面上的一个小区域,却可以实现多级菜单. 完整HTML文件代码: 复制代码 代码如下: <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ZoneMenu- jquery plugin<

  • 基于jQuery的弹出消息插件 DivAlert之旅（一）

    想着自己学习Javascript,以及Ajax.jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来瞧瞧,了解了jQuery插件的基本格式,理一下基本的思路,动工吧... 这个DivAlert插件,顾名思义就是页面弹出框,也就相当于Winform里面MessageBox.Show()那样的东西. 首先,我们来定义一下一些最基本的参数: 插件初始化 复制代码 代码如下: (function($) {

  • Jquery 实现弹出层插件

    弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 1:遮罩层 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask 复制代码 代码如下: .mask {     position: fixed;     width: 100%;     height: 100%;     backgr

  • AeroWindow 基于JQuery的弹出窗口插件

    AeroWindow 基于JQuery的弹出窗口插件

    可以一个页面中创建多个弹出窗,被选中的弹出窗会加亮显示,在同一网页中可以有多个弹出窗口,也可以通过双击窗口实现最大化,跟windows像极了.如果想要做一个类似操作系统的页面,用这个插件是完全可以实现的.兼容多种主流浏览器. 最基础的调用方法: 复制代码 代码如下: $('#YourContainerDiv').AeroWindow((WindowTitle:'hello world',)); 带全部参数的调用: 复制代码 代码如下: $('#YourContainerDiv').AeroWin

  • jQuery boxy弹出层插件中文演示及使用讲解

    使用该jQuery插件 要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中.使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation".这会给匹配的元素附加一些行为,如下: 一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中. 如果href锚点内容为其他一些东西,则会试图使用Ajax载入其

  • 基于jQuery的弹出框插件

    html如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

  • JQUERY THICKBOX弹出层插件

    .THICKBOX支持一下浏览器: Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10--但是据我的使用,IE6还是有点问题的!下面我们首先来看它的调用: 1.肯定你先要下载jquery.js和thickbox.js了.还有thickbox.css也不能少! 复制代码

  • 非常强大的 jQuery.AsyncBox 弹出对话框插件

    非常强大的 jQuery.AsyncBox 弹出对话框插件

    复制代码 代码如下: <link href="asyncbox/skins/ZCMS/asyncbox.css" rel="stylesheet" type="text/css" /> <script src="asyncbox/jQuery.v1.4.2.js" type="text/javascript"></script> <script src="

  • jquery.Jwin.js 基于jquery的弹出层插件代码

    代码如下: 复制代码 代码如下: (function ($) { var imgdir = 'images/';//图片文件夹路径 var autoHide=false;//悬浮div是否自动隐藏 var hideType='hide';//隐藏的方式 可选参数 hide.slide.fade var hideDelay=0;//悬浮div隐藏过程使用的时间 var hideTime=0;//悬浮div延迟隐藏时间 var zIndex=100;//多个div时获取焦点的div处于顶层 var

随机推荐