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

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

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

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

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <title>Keleyi(jQuery Menu Plugin) - keleyi.com</title><base target="_blank" />
  5.  <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
  6.  <link href="http://keleyi.com/keleyi/demo/keleyi.css" type="text/css" rel="Stylesheet" />
  7.  <style>
  8.  body
  9.  {
  10.  margin: 0px;
  11.  overflow:scroll;
  12.  }
  13.  </style>
  14.  </head>
  15.  <body>
  16.  <div style="text-align:center"><h1>Keleyi</h1>
  17.  A jQuery Menu Plugin
  18.  </div>
  19.  <div style="height:360px;background-color:#66FF66;"></div>
  20.  <ul id="keleyi-menu">
  21.  <li><a href="http://keleyi.com">Home</a></li>
  22.  <li><a href="http://keleyi.com/menu/webqd/">Web</a>
  23.  <ul>
  24.  <li><a href="http://keleyi.com/menu/javascript/">Javascript</a></li>
  25.  <li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li>
  26.  <li><a href="http://keleyi.com/menu/html5/">HTML5</a></li>
  27.  </ul>
  28.  </li>
  29.  <li><a href="http://keleyi.com/keleyi/">Keleyi</a></li>
  30.  <li><a href="http://keleyi.com/keleyi/demo/">Demo</a>
  31.  <ul>
  32.  <li><a href="http://keleyi.com/keleyi/demo/1.htm">Demo 1</a></li>
  33.  <li><a href="http://keleyi.com/keleyi/demo/2.htm">Demo 2</a></li>
  34.  <li><a href="http://keleyi.com/keleyi/demo/3.htm">Demo 3</a></li>
  35.  <li><a href="http://keleyi.com/keleyi/demo/4.htm">Demo 4</a></li>
  36.  <li><a href="http://keleyi.com/keleyi/demo/5.htm">Demo 5</a></li>
  37.  <li><a href="http://keleyi.com/keleyi/demo/6.htm">Demo 6</a></li>
  38.  <li><a href="http://keleyi.com/keleyi/demo/7.htm">Demo 7</a></li>
  39.  </ul>
  40.  </li>
  41.  <li><a href="http://keleyi.com/keleyi/demo/8.htm">Demo 8</a></li>
  42.  <li><a href="http://keleyi.com/keleyi/demo/9.htm">Demo 9</a></li>
  43.  </ul>
  44.  <div style="height:900px; visibility: visible; background-color:Olive">
  45.  </div>
  46.  <script type="text/javascript" src="http://keleyi.com/keleyi/demo/jquery.keleyi.js"></script>
  47.  <script type="text/javascript">
  48.  $("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative"
  49.  , "margin": "0px auto 0px 0px"
  50.  });
  51.  </script>
  52.  </body>
  53.  </html>

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

  1.  <link href="http://keleyi.com/keleyi/demo/keleyi.css" type="text/css" rel="Stylesheet" />
  2.  <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
  3.  <script type="text/javascript" src="http://keleyi.com/keleyi/demo/jquery.keleyi.js"></script>

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

  1.  <ul id="keleyi-menu">
  2.  
  3.  <li><a href="http://keleyi.com">主菜单项一</a></li>
  4.  <li><a href="http://keleyi.com/keleyi/">主菜单项二</a></li>
  5.  
  6.  <li><a href="http://keleyi.com/keleyi/demo/">主菜单项三</a>
  7.  <ul>
  8.  <li><a href="http://keleyi.com/keleyi/demo/1.htm">子菜单项1</a></li>
  9.  <li><a href="http://keleyi.com/keleyi/demo/2.htm">子菜单项2</a></li>
  10.  <li><a href="http://keleyi.com/keleyi/demo/3.htm">子菜单项3</a></li>
  11.  <li><a href="http://keleyi.com/keleyi/demo/4.htm">子菜单项4</a></li>
  12.  <li><a href="http://keleyi.com/keleyi/demo/5.htm">子菜单项5</a></li>
  13.  <li><a href="http://keleyi.com/keleyi/demo/6.htm">子菜单项6</a></li>
  14.  <li><a href="http://keleyi.com/keleyi/demo/7.htm">子菜单项7</a></li>
  15.  </ul>
  16.  </li>
  17.  
  18.  </ul>

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

  1.  <script type="text/javascript">
  2.  $("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative"
  3.  , "margin": "0px auto 0px 0px"
  4.  });
  5.  </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. iOS—Xcode 7真机测试

    Xcode 7真机测试详解 1.准备 注意:一定要让你的真机设备的系统版本和app的系统版本想对应,如果不对应就会出现一个很常见的问题:could not find developer disk im ...

  2. bootstrap-material-design-个人总结

    bootstrap-material-design-个人总结: 所需框架:1.boostrapt 3.0+2.jQuery 1.9.1+ 项目目录:Material/├── css/│ ├── boo ...

  3. 前端MVC框架Backbone 1.1.0源码分析(一)

    前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...

  4. 让低版本的 Android 项目显示出 Material 风格的点击效果

    每天都被不同的需求纠缠的生活是幸福而又不幸的,这不我们家亲爱的设计师们又让我们在低版本的 Android 平台上实现一下类似于 Material Design 的点击效果. 虽然大家都知道 Mater ...

  5. 《JS设计模式笔记》 3,观察者模式

    <script type="text/javascript"> //挂插着模式又叫发布订阅模式应该是最常用的模式 //1,dom事件就是观察者模式,只要订阅了click ...

  6. Android Drawable、Bitmap、byte[]之间的转换

    转自http://blog.csdn.net/june5253/article/details/7826597 1.Bitmap-->Drawable Bitmap drawable2Bitma ...

  7. Linux异常表

    一.为什么需要异常表? 处于内核态的程序有下面四种情况会产生缺页异常: 1.内核试图访问属于进程地址空间的页,但是,该页对应的页框不存在或者内核试图去访问一个只读的页,分别对应“请求调页”和“写时复制 ...

  8. make things simple

    以前看过一篇文章,具体内容不记得了,只记得它的结论了:懒是人类进步的源动力.当时觉得结论有点新颖,文中列举了大量的实例证明这个结论,其中重点强调了计算机学科.我本身从事算是计算机相关的工作,对文中的部 ...

  9. JavaScript（Node.js）+ Selenium自动化测试

    Selenium is a browser automation library. Most often used for testing web-applications, Selenium may ...

  10. （四）WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.前言 在前面我花了两个篇幅来讲解行列号的获取,也解释了为什么要获取行 ...