原貼地址：http://www.jq22.com/jquery-info14666
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>仿微信自定義菜單全屏自適應手機底部彈出菜單js特效代碼</title>
<script src="js/jquery-1.10.2.js"></script>
<style type="text/css">
*{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;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="">
<div class="menu_li"><img src="image/coin.png" width="10"> 網頁特效</div>
<img class="line" src="image/line.png" width="1">
<span style="bottom: -195px;">
<img src="image/navbg4.png" width="100%">
<div>
<a href="">html5模板</a>
<a href="">手機js特效</a>
<a href="">微測試</a>
<a href="">微遊戲</a>
</div>
</span>
</li>
<li class="">
<div class="menu_li"><img src="image/coin.png" width="10"> 手機特效</div>
<img class="line" src="image/line.png" width="1">
<span style="bottom: -195px;">
<img src="image/navbg4.png" width="100%">
<div>
<a href="">諮詢購買</a>
<a href="">諮詢購買</a>
<a href="">諮詢購買</a>
<a href="">諮詢購買</a>
</div>
</span>
</li>
<li class="">
<div class="menu_li"><img src="image/coin.png" width="10"> 手機app</div>
<span style="bottom: -237px;">
<img src="image/navbg5.png" width="100%">
<div>
<a href="">諮詢購買</a>
<a href="">諮詢購買</a>
<a href="">諮詢購買</a>
<a href="">諮詢購買</a>
<a href="">諮詢購買</a>
</div>
</span>
</li>
</ul>
</div>
<div class="footer_front" style="display: none;"><img src="image/front.png" width="100%" height="100%"></div>
<script type="text/javascript">
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();
});
</script>
</body></html>代碼中用到的幾張圖片：
coin.png
front.png
line.png
menubg.png
navbg4.png
navbg5.png
最終效果圖
