插件名：柯乐义
英文名：Keleyi
js文件名称：jquery.keleyi.js
插件功能：该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单。

示例查看：http://keleyi.com/keleyi/

更多示例：0 1 2 3 4 5 6 7 8 9 10 11 12

从示例可以看出，Keleyi这个菜单插件使用方便，可以灵活自定义多种样式，包括颜色，位置，菜单项宽度等等。

下面给出一个示例的HTML文件代码：

 <!DOCTYPE html>

 <html>

 <head>

 <title>Keleyi(jQuery Menu Plugin) - keleyi.com</title><base target="_blank" />

 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>

 <link href="http://keleyi.com/keleyi/demo/keleyi.css" type="text/css" rel="Stylesheet" />

 <style>

 body

 {

 margin: 0px;

 overflow:scroll;

 }

 </style>

 </head>

 <body>

 <div style="text-align:center"><h1>Keleyi</h1>

 A jQuery Menu Plugin

 </div>

 <div style="height:360px;background-color:#66FF66;"></div>

 <ul id="keleyi-menu">

 <li><a href="http://keleyi.com">Home</a></li>

 <li><a href="http://keleyi.com/menu/webqd/">Web</a>

 <ul>

 <li><a href="http://keleyi.com/menu/javascript/">Javascript</a></li>

 <li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li>

 <li><a href="http://keleyi.com/menu/html5/">HTML5</a></li>

 </ul>

 </li>

 <li><a href="http://keleyi.com/keleyi/">Keleyi</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/">Demo</a>

 <ul>

 <li><a href="http://keleyi.com/keleyi/demo/1.htm">Demo 1</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/2.htm">Demo 2</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/3.htm">Demo 3</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/4.htm">Demo 4</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/5.htm">Demo 5</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/6.htm">Demo 6</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/7.htm">Demo 7</a></li>

 </ul>

 </li>

 <li><a href="http://keleyi.com/keleyi/demo/8.htm">Demo 8</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/9.htm">Demo 9</a></li>

 </ul>

 <div style="height:900px; visibility: visible; background-color:Olive">

 </div>

 <script type="text/javascript" src="http://keleyi.com/keleyi/demo/jquery.keleyi.js"></script>

 <script type="text/javascript">

 $("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative"

 , "margin": "0px auto 0px 0px"

 });

 </script>

 </body>

 </html>

插件的使用一：
使用这个插件,需要引用这3个文件(一个CSS文件，一个jQuery库，和一个插件js文件)：

 <link href="http://keleyi.com/keleyi/demo/keleyi.css" type="text/css" rel="Stylesheet" />

 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>

 <script type="text/javascript" src="http://keleyi.com/keleyi/demo/jquery.keleyi.js"></script>

插件的使用二：
从上面的代码看出，这个菜单的HTML代码非常简洁，格式如下：

 <ul id="keleyi-menu">

 <li><a href="http://keleyi.com">主菜单项一</a></li>

 <li><a href="http://keleyi.com/keleyi/">主菜单项二</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/">主菜单项三</a>

 <ul>

 <li><a href="http://keleyi.com/keleyi/demo/1.htm">子菜单项1</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/2.htm">子菜单项2</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/3.htm">子菜单项3</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/4.htm">子菜单项4</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/5.htm">子菜单项5</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/6.htm">子菜单项6</a></li>

 <li><a href="http://keleyi.com/keleyi/demo/7.htm">子菜单项7</a></li>

 </ul>

 </li>

 </ul>

插件的使用三：
然后就是定义菜单的代码:

 <script type="text/javascript">

 $("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative"

 , "margin": "0px auto 0px 0px"

 });

 </script>

这样就可以在页面上显示一个特别的向上弹出菜单了。

原文：http://keleyi.com/a/bjac/c4oc8tyo.htm

web前端：http://www.cnblogs.com/jihua/p/webfront.html

向上弹出菜单jQuery插件的更多相关文章

  1. 多级弹出菜单jQuery插件ZoneMenu

    ZoneMenu是一个菜单jQuery插件,只需占用页面上的一个小区域,却可以实现多级菜单. 在线体验:http://keleyi.com/jq/zonemenu/ 点击这里下载 完整HTML文件代码 ...

  2. 自用的弹出窗口jquery插件

    现有网上的弹出窗口插件很多, 但发现在项目应用中总会有些功能不能适用, 最后只好自己写一个:插件主要参考了ymPrompt弹窗代码, ymPrompt是JS的弹窗,本插件相当于是ymPrompt的jq ...

  3. 基于jQuery1.4.2轻量级的弹出窗口jQuery插件wBox 1.0

    Box特点 背景透明度可以根据实际情况进行调节 可以根据需要添加wBox标题 支持callback函数 支持html内容自定义 支持在wBox显示#ID的内容 支持Ajax页面内容 支持iFrame ...

  4. magnific-popup 一款优秀, 多种功能于一身的弹出层jQuery插件.

    功能很强大:灯箱, 画廊, 放大图片, 弹出Youtube GoogleMap, ajax读取popup等等文档:http://dimsemenov.com/plugins/magnific-popu ...

  5. FloatingActionMenu 向上弹出菜单

    本人在github上找到了一个FloatingActionsMenu,精简了其效果(原效果有上下左右四个方向)仅仅保留向上的效果,并做了一定的优化. github上的源代码:地址 ,精简后的源代码地址 ...

  6. html5手机端遮罩弹出菜单代码

    效果体验:http://hovertree.com/texiao/html5/17/ 效果图: 代码如下: <!doctype html> <html lang="zh&q ...

  7. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  8. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  9. JavaScript 实现触点式弹出菜单插件

    之前做项目时经常用到一种触点式弹出菜单或者导航的功能,这个功能的主要应用场景是:web页面中多层分级导航或者子功能目录,但又考虑到页面区域有限,于是就考虑到在鼠标移动到某导航按钮上或者点击时,系统将在 ...

随机推荐

  1. Atitit 基于sql编程语言的oo面向对象大规模应用解决方案attilax总结

    Atitit 基于sql编程语言的oo面向对象大规模应用解决方案attilax总结 1. Sql语言应该得到更大的范围的应用,1 1.1. 在小型系统项目中,很适合存储过程写业务逻辑2 1.2. 大型 ...

  2. MVC4做网站后台:栏目管理1、添加栏目

    把栏目添加删除跟前台混在一起结构清晰,现在有了后台管理的区域就把后台管理相关的代码分开. 要实现功能: 1.添加栏目 2.删除栏目 3.修改栏目信息 -- 一.开始 1.添加 接口InterfaceC ...

  3. Create Volume 操作（Part II） - 每天5分钟玩转 OpenStack（51）

    上一节我们讨论了 Cinder 创建 Volume 的第一部分,cinder-api 的操作,本节继续第二部分,cinder-scheduler 调度工作. cinder-scheduler 执行调度 ...

  4. AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...

  5. C# 对象锁

    现在有一种场景,服务端将一个任务派发给10个客户端执行,所有客户端执行完后,整个任务才算执行完. 每个客户端执行完后,通过http发送一个完成的消息给服务端,服务端发送邮件通知给用户. 当10个客户端 ...

  6. ASP.NET WebForms MapPageRoute 路由配置

    MapPageRoute 应该是 ASP.NET 4.0 中的东西,但现在我是第一次使用它,使用场景是:MVC 混合使用 WebForm,然后对 WebForm 进行路由配置,当然也可以使用 ISAP ...

  7. Lua 学习笔记（八）错误（error）

    Lua所遇到的任何未预期条件都会引发一个错误.因此在发生错误时不能简单的崩溃或着退出,而是结束当前程序块并返回应用程序.当错误引发时进行恰当的处理是最合适的,然而这个阶段伴随着错误的捕获.错误的处理. ...

  8. 使用CSS3 制作一个material-design 风格登录界面

    心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css ...

  9. 用JPUSH极光推送实现服务端向安装了APP应用的手机推送消息（C#服务端接口）

    这次公司要我们做一个功能,就是当用户成功注册以后,他登录以后要收到消息,当然这个消息是安装了我们的手机APP应用的手机咯. 极光推送的网站的网址是:https://www.jpush.cn/ 极光推送 ...

  10. Django 1.10 中文文档------3.2.1 模型Models

    3.2.1 models模型 通常一个模型映射一张单独的数据表. 基本概念: 每个model都是django.db.models.Model的子类 model的每个属性代表数据表的某一列 Django ...