基本信息
源码名称：仿微信自定义菜单全屏自适应手机底部弹出菜单
源码大小：0.04M
文件格式：.rar
开发语言：js
更新时间：2016-03-23
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 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.9.1.min.js" type="text/javascript"></script>

</head>

<body>

<div id="menu">
	<ul>
		<li>
			<div class="menu_li"><img src="images/coin.png" width="10" />&nbsp;网页特效</div>
			<img class="line" src="images/line.png" width="1">
			<span>
				<img src="images/navbg4.png" width="100%">
				<div>
					<a href="http://www.17sucai.com">html5模板</a>
					<a href="http://www.17sucai.com">手机js特效</a>
					<a href="http://www.17sucai.com">微测试</a>
					<a href="http://www.17sucai.com">微游戏</a>
				</div>
			</span>
		</li>
		<li>
			<div class="menu_li"><img src="images/coin.png" width="10" />&nbsp;手机特效</div>
			<img class="line" src="images/line.png" width="1" />
			<span>
				<img src="images/navbg4.png" width="100%" />
				<div>
				<a href="http://www.17sucai.com">咨询购买</a>
				<a href="http://www.17sucai.com">咨询购买</a>
				<a href="http://www.17sucai.com">咨询购买</a>
				<a href="http://www.17sucai.com">咨询购买</a>
				</div>
			</span>
		</li>
		<li>
			<div class="menu_li"><img src="images/coin.png" width="10" />&nbsp;手机app</div>
			<span>
				<img src="images/navbg5.png" width="100%">
				<div>
					<a href="http://www.17sucai.com">咨询购买</a>
					<a href="http://www.17sucai.com">咨询购买</a>
					<a href="http://www.17sucai.com">咨询购买</a>
					<a href="http://www.17sucai.com">咨询购买</a>
					<a href="http://www.17sucai.com">咨询购买</a>
				</div>
			</span>
		</li>
	</ul>
</div>

<div class="footer_front"><img src="images/front.png" width="100%" height="100%"></div>

<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>

<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:35},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>