本文使用jQuery實現底部菜單，菜單將固定在頁面的底部，不隨頁面的滾動而滾動，而且可以向上彈出二級菜單。
步驟一，引用jQuery庫和keleyi菜單插件的js和css文件，如下：
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<link href="/keleyi/inc/0k1k5/jquery.keleyi.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="/keleyi/inc/0k1k5/jquery.keleyi.js"></script>
步驟二，構造菜單的HTML代碼，如下：
<div style="width:986px;margin:0px auto;height:360px;background-color:#99ffee;"></div>
<div style="width:986px;margin:0px auto;height:360px;background-color:#cccccc;"><h2>底部向上彈出菜單</h2></div>
<div style="width:986px;margin:0px auto;height:360px;background-color:#ff99ee;"></div>
<div style="width:986px;margin:0px auto;height:360px;background-color:#99ffee;"></div>
<div style="width:986px;margin:0px auto;height:360px;background-color:#eeff99;"></div>
<ul id="keleyi-menu">
<li><a href="http://">Home</a></li>
<li><a href="http://plugins.jquery.com/keleyi/">Plugin Home</a>
<ul>
<li><a href="http:///menu/jqueryplugins/">jQuery Plugins</a></li>
<li><a href="https://github.com/keleyi/keleyi">Star on Github</a></li>
</ul>
</li>
<li><a href="http:///keleyi/help/">Help</a></li>
<li><a href="http:///keleyi/demo/">Demo</a>
<ul>
<li><a href="http:///keleyi/demo/1.htm">Demo 1</a></li>
<li><a href="http:///keleyi/demo/2.htm">Demo 2</a></li>
<li><a href="http:///keleyi/demo/3.htm">Demo 3</a></li>
<li><a href="http:///keleyi/demo/4.htm">Demo 4</a></li>
<li><a href="http:///keleyi/demo/5.htm">Demo 5</a></li>
</ul>
</li>
<li><a href="http:///keleyi/demo/6.htm">Demo 6</a>
<ul>
<li><a href="http:///keleyi/demo/7.htm">Demo 7</a></li>
<li><a href="http:///keleyi/demo/8.htm">Demo 8</a></li>
<li><a href="http:///keleyi/demo/9.htm">Demo 9</a></li>
<li><a href="http:///keleyi/demo/10.htm">Demo 10</a></li></ul>
</li>
<li><a href="http:///keleyi/demo/11.htm">Demo 11</a></li>
<li><a href="http:///keleyi/demo/12.htm">Demo 12</a></li>
</ul>
其中菜單的代碼是UL的部分，前面幾個div是為了增加頁面高度，體現菜單一直處在底部。
步驟三，初始化菜單，代碼如下：
<script type="text/javascript">
$("#keleyi-menu").keleyi({ "item_width": "100px"
, "item_margin": "0px", "item_background_color": '#9900FF', "item_background_color_hover": "#6600CC", "bar_background_color": "#9900FF"
});
</script>
這樣一個底部向上彈出菜單就實現了。
點擊這裡查看效果