本文实例讲述了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 });
