插件名：柯乐义
英文名：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>
这样就可以在页面上显示一个特别的向上弹出菜单了。