这里要分享的是一个菜单插件，在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(
); 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(
); $(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(); $(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 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菜单插件例子：
keleyi menu (jquery plugin)0.1.6 demo- keleyi.com keleyi a jquery menu plugin browser support keleyi 0.1.4-0.1.6:ie6+,chrome,firefox,opera,safari
keleyi 0.1.3:ie8+(not support ie6),chrome,firefox,opera,safari
home jquery github keleyi demo 11 demo demo 1 demo 2 demo 3 demo 4 demo 5 demo 6 demo 7 demo 8 demo 9 demo 10 demo 12 demo 13
希望本文所述对大家的jquery程序设计有所帮助。