jQuery菜单插件用法实例

这篇文章主要介绍了jQuery菜单插件用法,以一个实例形式较为详细的分析了jquery菜单插件的完整使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery菜单插件用法。分享给大家供大家参考。具体如下：

这里要分享的是一个菜单插件，在http://plugins.jquery.com/keleyi/ 看到的，使用找个插件可以制作页面底部向上弹出的菜单，不一定在页底，还有多种其他方式。

jQuery菜单插件js文件：

1. /*! 
2. * Keleyi(jQuery Menu) 
3. * version: 0.1.6 
4. * Copyright (c) 2013 KeLeyi 
5. */ 
6. (function ($) { 
7. $.fn.keleyi = function (options) { 
8. var settings = $.extend({ 
9. width: '986px', 
10. margin: '0px auto', 
11. isAutoAddTriangle: true, 
12. item_background_color_hover: '#005500', 
13. item_background_color: 'transparent', 
14. item_width: 'auto', 
15. item_margin: '0px 0px 0px 10px', 
16. bar_height: 'auto', 
17. bar_position: 'fixed', 
18. bar_background_color: "#008000", 
19. bar_bottom: "0px", 
20. mainItem_color: "white", 
21. subItem_color:"white" 
22. }, options); 
23. $(this).addClass("keleyi-menu"); 
24. $(this).css({ "width": settings.width, "margin": settings.margin }); 
25. $(this).wrap("<div class='keleyi-menubar'></div>"); 
26. var k_bar = $(this).parent(); 
27. k_bar.css({ "background-color": settings.bar_background_color 
28. , "height": settings.bar_height, "position": settings.bar_position 
29. , "bottom": settings.bar_bottom, "min-width": settings.width 
30. }); 
31. if (! -[1, ] && !window.XMLHttpRequest) { 
32. if (k_bar.css("position") == "fixed") { 
33. ie6FixedBottom(k_bar, settings.bar_bottom); 
34. } 
35. } 
36. $(this).parent().append("<div style='width:100%;clear:both;height:0px;overflow:hidden'></div>"); 
37. $(this).find(">li").css({ "width": settings.item_width, "background-color": settings.item_background_color, "margin": settings.item_margin 
38. , "padding": "0px", "white-space": "nowrap", "height": "20px", "float": "left", "text-align": "center" 
39. , "display": "inline-block", "position": "relative" 
40. }); 
41. $(this).find(">li a").css({ "color": "white", "line-height": "20px" 
42. , "display": "block", "font-size": "14px" 
43. });  
44. if (settings.isAutoAddTriangle) 
45. $(this).find(">li").has('ul').find("a:first").append("<b></b>"); 
46. $(this).find(">li").find("a:first").css({ "width": "100%", "overflow": "hidden", "color": settings.mainItem_color }); 
47. $(this).find(">li").find("b").css({ "border-color": ("transparent transparent " + settings.mainItem_color) }) 
48. $(this).find(">li ul").css({ "padding": "0px", "list-style-type": "none" 
49. , "background-color": "transparent", "position": "absolute", "display": "none" 
50. }); 
51. $(this).find(">li").find("li a").css({ "color": settings.subItem_color }); 
52. $(this).find(">li>a").mouseover(function () { 
53. $(this).parent().css({ "background-color": settings.item_background_color_hover }); 
54. var k_ul = $(this).parent().find("ul"); 
55. if (k_ul.length < 1) 
56. return; 
57. k_ul.css({ "background-color": settings.item_background_color_hover, "top": $(this).parent().position().top - (k_ul.height()) 
58. , "left": "0px", "margin": "0px" 
59. }).show(); 
60. if (k_ul.width() < $(this).parent().width()) 
61. k_ul.width($(this).parent().width()); 
62. }); 
63. $(this).find(">li").mouseleave(function () { 
64. $(this).find("ul").hide(); 
65. $(this).css("background-color", settings.item_background_color); 
66. }); 
67. function ie6FixedBottom(fixedobj, bottommargin) { 
68. fixedobj.css({ "position": "absolute" }); 
69. var k_bm = new Number; 
70. k_bm = Number(bottommargin.substring(0, bottommargin.length - 2)); 
71. var obj = fixedobj[0]; 
72. function setStyleTop() { 
73. obj.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight 
74. - obj.offsetHeight - (parseInt(obj.currentStyle.marginTop, 0) || k_bm) - (parseInt(obj.currentStyle.marginBottom, 0) || k_bm) 
75. } 
76. window.onscroll = function () { setStyleTop(); } 
77. window.onresize = function () { setStyleTop(); } 
78. } 
79. } 
80. } (jQuery)); 

插件css文件：

1. div.keleyi-menubar{width:100%;visibility:visible;padding:0px;} 
2. ul.keleyi-menu{list-style-type:none;padding:0px;} 
3. ul.keleyi-menu a{text-decoration:none} 
4. ul.keleyi-menu a:hover{text-decoration:underline;} 
5. ul.keleyi-menu>li li{padding:0px;} 
6. ul.keleyi-menu li b{ 
7. display:inline-block; 
8. width: 0; 
9. height: 0; 
10. border-width: 4px 4px; 
11. border-style: solid; 
12. border-color: transparent transparent #fff; 
13. font-size: 0; 
14. line-height: 0; 
15. -moz-transition: -moz-transform .2s ease-in; 
16. -o-transition: -o-transform .2s ease-in; 
17. transition: transform .2s ease-in; 
18. vertical-align:text-top; 
19. margin-left:5px 
20. } 

jQuery菜单插件例子：

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <title>Keleyi Menu (jQuery Plugin)0.1.6 Demo- keleyi.com</title> 
5. <script type="text/javascript" src="js/jquery.min.js"></script> 
6. <script type="text/javascript" src="jquery.keleyi.js"></script> 
7. <link href="jquery.keleyi.css" type="text/css" rel="Stylesheet" /> 
8. <style>body{margin: 0px;}</style> 
9. </head> 
10. <body> 
11. <div style="text-align:center;width:986px;margin:0px auto;"> 
12. <h1> 
13. Keleyi</h1> 
14. A jQuery Menu Plugin 
15. <h2>Browser Support</h2> 
16. Keleyi 0.1.4-0.1.6:IE6+,Chrome,Firefox,Opera,Safari<br /> 
17. Keleyi 0.1.3:IE8+(not support IE6),Chrome,Firefox,Opera,Safari 
18. </div> 
19. <div style="height: 360px;background-color: #66FF66;"></div> 
20. <ul id="keleyi-menu"> 
21. <li><a href="">Home</a></li> 
22. <li><a href="http://plugins.jquery.com/keleyi/">jQuery</a> 
23. <ul> 
24. <li><a href="https://github.com/keleyi/keleyi">github</a></li> 
25. </ul> 
26. </li> 
27. <li><a href="/keleyi/">Keleyi</a></li> 
28. <li><a href="/keleyi/demo/11.htm">Demo 11</a></li> 
29. <li><a href="/keleyi/demo/">Demo</a> 
30. <ul> 
31. <li><a href="/keleyi/demo/1.htm">Demo 1</a></li> 
32. <li><a href="/keleyi/demo/2.htm">Demo 2</a></li> 
33. <li><a href="/keleyi/demo/3.htm">Demo 3</a></li> 
34. <li><a href="/keleyi/demo/4.htm">Demo 4</a></li> 
35. <li><a href="/keleyi/demo/5.htm">Demo 5</a></li> 
36. </ul> 
37. </li> 
38. <li><a href="/keleyi/demo/6.htm">Demo 6</a> 
39. <ul> 
40. <li><a href="/keleyi/demo/7.htm">Demo 7</a></li> 
41. <li><a href="/keleyi/demo/8.htm">Demo 8</a></li> 
42. <li><a href="/keleyi/demo/9.htm">Demo 9</a></li> 
43. <li><a href="/keleyi/demo/10.htm">Demo 10</a></li></ul> 
44. </li> 
45. <li><a href="/keleyi/demo/12.htm">Demo 12</a></li> 
46. <li><a href="/keleyi/demo/0x1x5/">Demo 13</a></li> 
47. </ul> 
48. <div style="height: 900px; visibility: visible; background-color: Olive"></div> 
49. <script type="text/javascript"> 
50. $("#keleyi-menu").keleyi({ "item_width": "100px", "bar_position": "relative" 
51. , "margin": "0px auto 0px 0px", "item_margin": "0px", "mainItem_color": "black","subItem_color":"black","bar_background_color":"#ffffff","item_background_color_hover":"#eeeeee" 
52. }); 
53. </script> 
54. </body> 
55. </html> 

希望本文所述对大家的jquery程序设计有所帮助。