固定底部导航菜单-续集（BottomMenu-移动端V3.0）
固定底部导航菜单-续集（BottomMenu-移动端V3.0）
适应在客户端，点击弹出二级菜单。因为手机不支持hover.所以使用click点击实现弹出菜单，并且一级菜单聚焦变色，变化背景图片
核心css片段
====================
根据css3伪类元素:before实现
在根据/*A.active.tab:befre就是说同时有这两个class的A标签的before伪元素*/
.bottommenu li>a.active{
color: #318BE3;
}
.bottommenu .tab:before {
content: '';
display: block;
width: 42px;
height: 42px;
margin: 0 auto;
background: url(../images/icon.png) no-repeat;
background-size: 42px;
}
.bottommenu .homeI_zhuye:before {
background-position: 1px -83px;
}
/*A.active.tab:befre就是说同时有这两个class的A标签的before伪元素*/
.bottommenu li>a.active.homeI_zhuye:before {
background-position: 0px -366px;
}
.bottommenu .homeI_dingdan:before {
background-position: 1px 4px;
}
.bottommenu li>a.active.homeI_dingdan:before {
background-position: 1px -474px;
}
.bottommenu .homeI_chanpin:before {
background-position: -1px -168px;
}
.bottommenu li>a.active.homeI_chanpin:before {
background-position: -1px -572px;
}
.bottommenu .homeI_yonghu:before {
background-position: 0px -259px;
}
.bottommenu li>a.active.homeI_yonghu:before {
background-position: 1px -672px;
}
=====================
核心js代码
$(".bottommenu li .tab").click(function() {
$(".bottommenu li .tab").removeClass('active');
$(this).addClass("active");
});
});
==============HTML=============
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en">
<html>
<head>
<title>bottommenu底部导航菜单-移动端 </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
<link href="css/base.css" type="text/css" rel="stylesheet" />
<link href="css/bottommenu.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/pop-layer.js"></script>
</head>
<body>
<div class="bottom">
<ul class="bottommenu">
<li><a href="#" class="homeI_zhuye tab">首页</a>
<ul class="pop-layer">
<li><a href="#" class="">弹出层1</a></li>
<li><a href="javascript:void(0);" class="">弹出层2</a></li>
<li><a href="javascript:void(0);" class="">弹出层3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" class="homeI_dingdan tab">订单</a></li>
<li><a href="javascript:void(0);" class="homeI_chanpin tab">产品</a>
<ul class="pop-layer">
<li><a href="javascript:void(0);" class="">弹出层1</a></li>
<li><a href="javascript:void(0);" class="">弹出层2</a></li>
<li><a href="javascript:void(0)" class="">弹出层3</a></li>
<li><a href="javascript:void(0);" class="">弹出层4</a></li>
<li><a href="javascript:void(0)" class="">弹出层5</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" class="homeI_yonghu tab">我的</a></li>
</ul>
</div>
</body>
</html>
====================CSS===========================
.bottom {
width: 100%;
height: 90px;
line-height: 90px;
position: fixed;
bottom: 0;
left: 0;
background: #FFFFFF;
}
.bottom li {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.bottom .bottommenu {
height: 90px;
border-top: 1px #dedede solid;
background: #F3F3F3;
}
.bottom .bottommenu>li {
float: left;
width: 25%;
height: 90px;
text-align: center;
position: relative;
padding-top: 10px;
}
.bottom .bottommenu>li+li {
border-left: 1px #dedede solid;
}
.bottommenu li>a {
color: #4f4d4f;
font-size: 16px;
display: block;
line-height: 32px;
padding-top: 4px;
}
.bottommenu .pop-layer {
/*visibility: hidden;*/
display: none;
text-align: center;
border-top: 1px #dedede solid;
background: #FFFFFF;
border-left: 1px #FFFFFF solid;
border-right: 1px #FFFFFF solid;
position: absolute;
bottom: 91px;
width: 100%;
/* -moz-box-shadow: 3px 3px 4px #333232;
-webkit-box-shadow: 2px 1px 2px #F1F1F1
box-shadow: 2px 1px 2px #F1F1F1;*/
}
.pop-layer li+li {
height: 50px;
border-top: 1px #dedede solid;
}
.pop-layer li a {
padding-top: 0;
height: 50px;
line-height: 50px;
}
.triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 10px solid #dedede;
border-left: 10px solid transparent;
position: absolute;
right: 7px;
bottom: 7px;
}
.bottommenu li>a.active{
color: #318BE3;
}
.bottommenu .tab:before {
content: '';
display: block;
width: 42px;
height: 42px;
margin: 0 auto;
background: url(../images/icon.png) no-repeat;
background-size: 42px;
}
.bottommenu .homeI_zhuye:before {
background-position: 1px -83px;
}
/*A.active.tab:befre就是说同时有这两个class的A标签的before伪元素*/
.bottommenu li>a.active.homeI_zhuye:before {
background-position: 0px -366px;
}
.bottommenu .homeI_dingdan:before {
background-position: 1px 4px;
}
.bottommenu li>a.active.homeI_dingdan:before {
background-position: 1px -474px;
}
.bottommenu .homeI_chanpin:before {
background-position: -1px -168px;
}
.bottommenu li>a.active.homeI_chanpin:before {
background-position: -1px -572px;
}
.bottommenu .homeI_yonghu:before {
background-position: 0px -259px;
}
.bottommenu li>a.active.homeI_yonghu:before {
background-position: 1px -672px;
}
=====================JS=========================
$(document).ready(function() {
$(".bottommenu li").click(function(e) {
if ($(this).find(".pop-layer").is(':hidden')) {
$(".bottommenu li .pop-layer").hide();
$(this).find(".pop-layer").show();
} else {
$(".bottommenu li .pop-layer").hide();
}
e.stopPropagation(); // 阻止冒泡
});
$(".pop-layer li").click(function(e) {
$(".pop-layer li").css('background', '#fff');
$(this).css('background', '#f0f0f0');
$(this).parent().show();
e.stopPropagation(); // 阻止冒泡
});
$(document).click(function() { // 点击空白消失
$(".bottommenu li .pop-layer").hide();
});
$(".bottommenu li .tab").click(function() {
$(".bottommenu li .tab").removeClass('active');
$(this).addClass("active");
});
});
=====================
感谢华-一棵树思维
下载地址：https://files.cnblogs.com/files/leshao/BottomMenu-%E7%A7%BB%E5%8A%A8%E7%AB%AFV3.0.rar
