向上弹出菜单jQuery插件_jquery 向上弹出

作者：代码探险家 | 2024-07-16 15:28:06

踩

jquery 向上弹出

插件名：柯乐义
英文名：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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/834956