模仿微信公众号底部导航菜单
模仿微信公众号底部导航菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<style>
*{
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);
}
</style>
</head>
<body>
<div class="footer">
<ul>
<li>
微金融
<span class="hasJt"></span>
</li>
<li>
悦生活
<span class="hasJt"></span>
</li>
<li>
信用卡
<span class="hasJt"></span>
</li>
<li>
微投资
<span class="hasJt"></span>
</li>
</ul>
</div>
<div class="nav-list">
<ul id="nav">
</ul>
<span class="jt"></span>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
var data = {
nav0:[
{
id:1,
name:'账户/积分查询',
url:'http://www.baidu.com'
},
{
id:2,
name:'微黄金',
url:'http://www.qq.com'
}
],
nav1:[
{
id:1,
name:'生活缴费',
url:'http://www.163.com'
},
{
id:2,
name:'商旅出行',
url:'http://www.taobao.com'
}
],
nav2:[
{
id:1,
name:'积分圆梦',
url:'http://www.jd.com'
},
{
id:2,
name:'业务办理大厅',
url:'http://www.souhu.com'
}
],
nav3:[
{
id:1,
name:'投资理财',
url:'http://www.github.com'
},
{
id:2,
name:'网点与预约',
url:'http://www.360.com'
}
]
}
var html = '';
function showNav(n){
html = ''
for(let i = 0;i<data['nav'+n].length;i++){
html += `<li><a href="${data['nav'+n][i].url}">${data['nav'+n][i].name}</a></li>`;
}
}
$(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();
})
})
</script>
</body>
</html>
欢迎关注小程序，感谢您的支持！
