本文实例讲述了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></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></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> <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></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></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程序设计有所帮助。
【jQuery菜单插件用法实例】相关文章：
★ JS或jQuery获取ASP.NET服务器控件ID的方法
★ JQuery插件ajaxfileupload.js异步上传文件实例