jQuery仿微信自定义菜单自适应手机底部的弹出菜单【原创】

页面的head部分，先引入jQuery库，然后设置好页面元素的样式，代码如下：

*{margin:0;padding:0;}
a,img{border:0;}
#menu{position:fixed;bottom:0px;width:100%;height:44px;line-height:44px;z-index:999;background:url(images/menubg.png) repeat-x;}
#menu ul{margin:0 auto;list-style-type:none;width:100%;max-width:500px;height:100%;}
#menu ul li{float:left;width:33.3%;height:100%;text-align:center;position:relative;font-size:14px;}
#menu ul li .line{position:absolute;top:0px;right:0px;z-index:30;}
#menu ul li .menu_li{position:absolute;top:0px;left:0px;z-index:20;width:100%;height:100%;color:#454545;background:url(images/menubg.png) repeat-x;}
#menu ul li .img_front{position:absolute;top:0px;left:0px;z-index:30;width:100%;height:100%;}
#menu ul li .img_front img{width:100%;height:100%;}
#menu ul li span{position:absolute;bottom:-300px;left:50%;width:104px;margin-left:-52px;margin-bottom:14px;height:auto;text-align:center;z-index:10;}
#menu ul li span div{position:absolute;top:0px;left:0px;}
#menu ul li span a{float:left;width:100%;height:43px;line-height:43px;color:#454545;text-decoration:none;}
.footer_front{position:fixed;width:100%;height:100%;top:0px;left:0px;z-index:888;display:none;}

页面的body部分，结构比较简单，3列菜单分别放在3个不同的li里面，代码如下：

<div id="menu">
	<ul>
		<li>
			<div class="menu_li">🍏&nbsp;健康水果</div>
			<img class="line" src="images/line.png" width="1">
			<span>
				<img src="images/navbg5.png" width="100%">
				<div>
					<a href="">🍎&nbsp;苹果</a>
					<a href="">🍇&nbsp;葡萄</a>
					<a href="">🍉&nbsp;西瓜</a>
					<a href="">🍌&nbsp;香蕉</a>
					<a href="">🍍&nbsp;菠萝</a>
					<a href="">🍓&nbsp;草莓</a>
				</div>
			</span>
		</li>
		<li>
			<div class="menu_li">🍛&nbsp;美食美味</div>
			<img class="line" src="images/line.png" width="1" />
			<span>
				<img src="images/navbg5.png" width="100%" />
				<div>
					<a href="">🍩&nbsp;甜甜圈</a>
					<a href="">🍰&nbsp;蛋糕</a>
					<a href="">🍕&nbsp;披萨</a>
					<a href="">🍔&nbsp;汉堡</a>
					<a href="">🍟&nbsp;薯条</a>
				</div>
			</span>
		</li>
		<li>
			<div class="menu_li">🏃&nbsp;运动达人</div>
			<span>
				<img src="images/navbg5.png" width="100%">
				<div>
					<a href="">⚽&nbsp;足球</a>
					<a href="">⚾&nbsp;棒球</a>
					<a href="">🏊&nbsp;游泳</a>
					<a href="">🏄&nbsp;冲浪</a>
					<a href="">🏂&nbsp;滑雪</a>
				</div>
			</span>
		</li>
	</ul>
</div>
<div class="footer_front"><img src="images/front.png" width="100%" height="100%"></div>

页面的底部，需要对每个菜单的点击事件作响应，代码如下：

window.onload = function(){
	$('#menu ul li').each(function(j){
		$('#menu ul li').eq(j).removeClass("on");
		$('#menu ul li span').eq(j).animate({bottom:-$('#menu ul li span').eq(j).height()},100);
	});
}
$('#menu ul li').each(function(i){
	$(this).click(function(){
		if($(this).attr("class")!="on"){
			$('#menu ul .on span').animate({bottom:-$('#menu ul .on span').height()},200);
			$('#menu ul .on').removeClass("on");
			$(this).addClass("on");
			$('#menu ul li span').eq(i).animate({bottom:20},200);
			$('.footer_front').show();
		}else{
			$('#menu ul li span').eq(i).animate({bottom:-$('#menu ul li span').eq(i).height()},200);
			$(this).removeClass("on");
			$('.footer_front').hide();
		}
	});
});
$('.footer_front').click(function(){
	$('#menu ul .on span').animate({bottom:-$('#menu ul .on span').height()},200);
	$('#menu ul .on').removeClass("on");
	$(this).hide();
});