模仿微信公众号底部导航菜单
demo
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background: #fff;
font-size:14px;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #666;
}
.footer{
width:100%;
height:50px;
background: #f2f2f2;
position: fixed;
bottom:0;
left:0;
border-top:solid 1px #dedede;
}
.footer ul{
overflow: hidden;
}
.footer ul li{
height:50px;
line-height: 50px;
border-right:solid 1px #dedede;
text-align: center;
float: left;
width:25%;
position: relative;
}
.footer ul li:last-child{
border-right:0;
}
.nav-list{
width:25%;
background: #f2f2f2;
position: absolute;
bottom:60px;
left:0;
display: none;
border-radius: 4px;
min-height:68px;
padding:10px 0;
}
.nav-list ul li{
text-align: center;
height:30px;
line-height: 30px;
font-size:12px;
border-bottom:solid 1px #ebebeb;
}
.nav-list ul li:last-child{
border-bottom:0;
}
.jt{
width:0;
height:0;
border:10px solid transparent;
border-top:solid 10px #f2f2f2;
position: absolute;
bottom:-20px;
left:50%;
margin-left:-10px;
}
.hasJt{
width:0;
height:0;
border:10px solid transparent;
border-left:10px solid #ccc;
position: absolute;
bottom:-10px;
right:-10px;
transform: rotate(45deg);
}
微金融
悦生活
信用卡
微投资
var data = {
nav0:[
{
id:1,
name:'账户/积分查询',
url:''
},
{
id:2,
name:'微黄金',
url:''
}
],
nav1:[
{
id:1,
name:'生活缴费',
url:''
},
{
id:2,
name:'商旅出行',
url:''
}
],
nav2:[
{
id:1,
name:'积分圆梦',
url:''
},
{
id:2,
name:'业务办理大厅',
url:''
}
],
nav3:[
{
id:1,
name:'投资理财',
url:''
},
{
id:2,
name:'网点与预约',
url:''
}
]
}
var html = '';
function showNav(n){
html = ''
for(let i = 0;i
html += `
${data['nav'+n][i].name}`;
}
}
$(function(){
var liList = $(".footer ul li");
$(liList).on('click',function(e){
var index = $(this).index();
var leftVal = index*(100 / liList.length)+'%';
switch(index){
case 0:
showNav(index);
break;
case 1:
showNav(index);
break;
case 2:
showNav(index);
break;
case 3:
showNav(index);
break;
}
$("#nav").html(html);//根据点击展示不同内容
$('.nav-list').show();
//定位弹窗位置
$('.nav-list').css({
left:leftVal
});
e.stopPropagation();//阻止冒泡
})
//点击非自身隐藏
$(document).on('click',function(){
$('.nav-list').hide();
})
})
欢迎关注小程序，感谢您的支持！
