一款jQuery仿微信自定义菜单自适应手机底部的弹出菜单特效,跟微信一样,3列5行一个15个菜单,菜单图标和背景可以自行设置,自适应屏幕大小并固定在页面的底部,整体效果挺不错的,喜欢的小伙伴们请收下把 。
页面的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">🍏 健康水果</div>
<img class="line" src="images/line.png" width="1">
<span>
<img src="images/navbg5.png" width="100%">
<div>
<a href="">🍎 苹果</a>
<a href="">🍇 葡萄</a>
<a href="">🍉 西瓜</a>
<a href="">🍌 香蕉</a>
<a href="">🍍 菠萝</a>
<a href="">🍓 草莓</a>
</div>
</span>
</li>
<li>
<div class="menu_li">🍛 美食美味</div>
<img class="line" src="images/line.png" width="1" />
<span>
<img src="images/navbg5.png" width="100%" />
<div>
<a href="">🍩 甜甜圈</a>
<a href="">🍰 蛋糕</a>
<a href="">🍕 披萨</a>
<a href="">🍔 汉堡</a>
<a href="">🍟 薯条</a>
</div>
</span>
</li>
<li>
<div class="menu_li">🏃 运动达人</div>
<span>
<img src="images/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"><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();
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791