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 js cookie的存储,获取和删除
Dec 29 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
vue项目中axios使用详解
Feb 07 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 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的面向对象编程
2006/10/09 PHP
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
python实现电脑自动关机
2018/06/20 Python
python调用staf自动化框架的方法
2018/12/26 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python 字符串格式化的示例
2020/09/21 Python
介绍Java的内部类
2012/10/27 面试题
文明美德伴我成长演讲稿
2014/05/12 职场文书
初三毕业评语
2014/12/26 职场文书
材料采购员岗位职责
2015/04/03 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
Redis入门基础常用操作命令整理
2022/06/01 Redis