仿淘宝手机端底部菜单（菜单切换页面跳转图标变化）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no"/>
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="renderer" content="webkit">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" >

</script>

<style>
.am-menu {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #efefef;
  text-align: center;
  height: 54px;
  overflow: hidden;
  z-index: 98;
  border-top: 1px solid #ddd;
}

.am-menu-column {
  width: 25%;
  float: left;
  font-size:16px;
  margin-top:15px;
}

/*new footer*/
/*因为都是用的字体图标可能显示不出来，但是字体颜色会有变化*/
.index i:before {
  content: "e602";
  color: #999;
}
.explore i:before {
  content: "e607";
  color: #999;
}
.life i:before {
  content: "e600";
  color: #999;
}
.my i:before {
  content: "e605";
  color: #999;
}
.index-active i:after {
  content: "e603";
  color: #32B5E5;
}
.explore-active i:after {
  content: "e608";
  color: #32B5E5;
}
.life-active i:after {
  content: "e601";
  color: #32B5E5;
}
.my-active i:after {
  content: "e606";
  color: #32B5E5;
}


.index a span,
.explore a span,
.life a span,
.my a span {
  display: block;
  color: #999;
}

.index-active a span,
.explore-active a span,
.life-active a span,
.my-active a span {
  display: block;
  color: #32b4e5;
}
</style>
</head>
<body>
<div style='height:2000px;'>
<h1>989898</h1>
<p>
1
1
1

1
1
1

</p>
  
  
</div>





<footer class="am-menu am-cf">
    <div class="am-menu-column index" id="index">
      <a href="#">
        <span>首页</span>
      </a>
    </div>
    <div class="am-menu-column explore" id="explore">
      <a href="#">
        <span>逛逛</span>
      </a>
    </div>
    <div class="am-menu-column life" id="life">
      <a href="#">
        <span>生活</span>
      </a>
    </div>
    <div class="am-menu-column my" id="my">
      <a href="#">
        <span>我的</span>
      </a>
    </div>
</footer>

</body>
</html>
仿淘宝手机端底部菜单（菜单切换 页面跳转 图标变化）

相关推荐

仿淘宝手机端底部菜单（菜单切换页面跳转图标变化）
