jQuery菜单插件用法实例

本文实例讲述了jQuery菜单插件用法。分享给大家供大家参考。具体如下：
这里要分享的是一个菜单插件，在http://plugins.jquery.com/keleyi/ 看到的，使用找个插件可以制作页面底部向上弹出的菜单，不一定在页底，还有多种其他方式。
jQuery菜单插件js文件：

/*！* Keleyi（jQuery Menu）* version: 0.1.6* Copyright （c） 2013 KeLeyi*/（function （$） {$.fn.keleyi = function （options） {var settings = $.extend（{width: "986px",margin: "0px auto",isAutoAddTriangle: true,item_background_color_hover: "#005500",item_background_color: "transparent",item_width: "auto",item_margin: "0px 0px 0px 10px",bar_height: "auto",bar_position: "fixed",bar_background_color: "#008000",bar_bottom: "0px",mainItem_color: "white",subItem_color:"white"}, options）;$（this）.addClass（"keleyi-menu"）;$（this）.css（{ "width": settings.width, "margin": settings.margin }）;$（this）.wrap（"<div class="keleyi-menubar"></div>"）;var k_bar = $（this）.parent（）;k_bar.css（{ "background-color": settings.bar_background_color, "height": settings.bar_height, "position": settings.bar_position, "bottom": settings.bar_bottom, "min-width": settings.width}）;if （！ -[1, ] && ！window.XMLHttpRequest） {if （k_bar.css（"position"） == "fixed"） {ie6FixedBottom（k_bar, settings.bar_bottom）;}}$（this）.parent（）.append（"<div style="width:100%;clear:both;height:0px;overflow:hidden"></div>"）;$（this）.find（">li"）.css（{ "width": settings.item_width, "background-color": settings.item_background_color, "margin": settings.item_margin, "padding": "0px", "white-space": "nowrap", "height": "20px", "float": "left", "text-align": "center", "display": "inline-block", "position": "relative"}）;$（this）.find（">li a"）.css（{ "color": "white", "line-height": "20px", "display": "block", "font-size": "14px"}）;if （settings.isAutoAddTriangle）$（this）.find（">li"）.has（"ul"）.find（"a:first"）.append（"<b></b>"）;$（this）.find（">li"）.find（"a:first"）.css（{ "width": "100%", "overflow": "hidden", "color": settings.mainItem_color }）;$（this）.find（">li"）.find（"b"）.css（{ "border-color": （"transparent transparent " + settings.mainItem_color） }）$（this）.find（">li ul"）.css（{ "padding": "0px", "list-style-type": "none", "background-color": "transparent", "position": "absolute", "display": "none"}）;$（this）.find（">li"）.find（"li a"）.css（{ "color": settings.subItem_color }）;$（this）.find（">li>a"）.mouseover（function （） {$（this）.parent（）.css（{ "background-color": settings.item_background_color_hover }）;var k_ul = $（this）.parent（）.find（"ul"）;if （k_ul.length < 1）return;k_ul.css（{ "background-color": settings.item_background_color_hover, "top": $（this）.parent（）.position（）.top - （k_ul.height（））, "left": "0px", "margin": "0px"}）.show（）;if （k_ul.width（） < $（this）.parent（）.width（））k_ul.width（$（this）.parent（）.width（））;}）;$（this）.find（">li"）.mouseleave（function （） {$（this）.find（"ul"）.hide（）;$（this）.css（"background-color", settings.item_background_color）;}）;function ie6FixedBottom（fixedobj, bottommargin） {fixedobj.css（{ "position": "absolute" }）;var k_bm = new Number;k_bm = Number（bottommargin.substring（0, bottommargin.length - 2））;var obj = fixedobj[0];function setStyleTop（） {obj.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight- obj.offsetHeight - （parseInt（obj.currentStyle.marginTop, 0） || k_bm） - （parseInt（obj.currentStyle.marginBottom, 0） || k_bm）}window.onscroll = function （） { setStyleTop（）; }window.onresize = function （） { setStyleTop（）; }}}} （jQuery））;

插件css文件：

div.keleyi-menubar{width:100%;visibility:visible;padding:0px;}ul.keleyi-menu{list-style-type:none;padding:0px;}ul.keleyi-menu a{text-decoration:none}ul.keleyi-menu a:hover{text-decoration:underline;}ul.keleyi-menu>li li{padding:0px;}ul.keleyi-menu li b{display:inline-block;width: 0;height: 0;border-width: 4px 4px;border-style: solid;border-color: transparent transparent #fff;font-size: 0;line-height: 0;-moz-transition: -moz-transform .2s ease-in;-o-transition: -o-transform .2s ease-in;transition: transform .2s ease-in;vertical-align:text-top;margin-left:5px}

jQuery菜单插件例子：

<！DOCTYPE html><html><head><title>Keleyi Menu （jQuery Plugin）0.1.6 Demo- keleyi.com</title><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="jquery.keleyi.js"></script><link href="jquery.keleyi.css" type="text/css" rel="Stylesheet" /><style>body{margin: 0px;}</style></head><body><div style="text-align:center;width:986px;margin:0px auto;"><h1>Keleyi</h1>A jQuery Menu Plugin<h2>Browser Support</h2>Keleyi 0.1.4-0.1.6:IE6+,Chrome,Firefox,Opera,Safari<br />Keleyi 0.1.3:IE8+（not support IE6）,Chrome,Firefox,Opera,Safari</div><div style="height: 360px;background-color: #66FF66;"></div><ul id="keleyi-menu"><li><a href="">Home</a></li><li><a href="http://plugins.jquery.com/keleyi/">jQuery</a><ul><li><a href="https://github.com/keleyi/keleyi">github</a></li></ul></li><li><a href="/keleyi/">Keleyi</a></li><li><a href="/keleyi/demo/11.htm">Demo 11</a></li><li><a href="/keleyi/demo/">Demo</a><ul><li><a href="/keleyi/demo/1.htm">Demo 1</a></li><li><a href="/keleyi/demo/2.htm">Demo 2</a></li><li><a href="/keleyi/demo/3.htm">Demo 3</a></li><li><a href="/keleyi/demo/4.htm">Demo 4</a></li><li><a href="/keleyi/demo/5.htm">Demo 5</a></li></ul></li><li><a href="/keleyi/demo/6.htm">Demo 6</a><ul><li><a href="/keleyi/demo/7.htm">Demo 7</a></li><li><a href="/keleyi/demo/8.htm">Demo 8</a></li><li><a href="/keleyi/demo/9.htm">Demo 9</a></li><li><a href="/keleyi/demo/10.htm">Demo 10</a></li></ul></li><li><a href="/keleyi/demo/12.htm">Demo 12</a></li><li><a href="/keleyi/demo/0x1x5/">Demo 13</a></li></ul><div style="height: 900px; visibility: visible; background-color: Olive"></div><script type="text/javascript">$（"#keleyi-menu"）.keleyi（{ "item_width": "100px", "bar_position": "relative", "margin": "0px auto 0px 0px", "item_margin": "0px", "mainItem_color": "black","subItem_color":"black","bar_background_color":"#ffffff","item_background_color_hover":"#eeeeee"}）;</script></body></html>

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