仿微信底部自定义菜单 移动web

最近在做微信开发，要实现微信公众号改版—-改成微官网形式，即移动web页面中实现公众号的主页面，包括了公众号的菜单在底部显示

本文针对仿公众号底部菜单这个功能实现进行总结。实现采用html和css、JavaScript。

html页面实现了布局方式：

<! DOCTYPE html" >
< html >
< head >
< title >New Document </ title >
< meta  name ="Generator"  content ="EditPlus" >
< meta  name ="Author"  content ="" >
< meta  name ="Keywords"  content ="" >
< meta  name ="Description"  content ="" >
< link  rel ="stylesheet"  type ="text/css"  href ="menu.css"  media ="all" >
</ head >
< script >
     var nav4 = ( function() {
        bindClick =  function(els, mask) {
             if (!els || !els.length) {
                 return;
            }
             var isMobile = "ontouchstart"  in window;
             for (  var i = 0, ci; ci = els[i]; i++) {
                ci.addEventListener("click", evtFn,  false);
            }

             function evtFn(evt, ci) {
                ci =  this;
                 for (  var j = 0, cj; cj = els[j]; j++) {
                     if (cj != ci) {
                        console.log(cj);
                        cj.classList.remove("on");
                    }
                }
                 if (ci == mask) {
                    mask.classList.remove("on");
                     return;
                }
                 switch (evt.type) {
                 case "click":
                     var on = ci.classList.toggle("on");
                    mask.classList[on ? "add" : "remove"]("on");
                     break;
                }
            }
            mask.addEventListener(isMobile ? "touchstart" : "click", evtFn,
                     false);
        };
         return {
            "bindClick" : bindClick
        };
    })();
</ script >
< body >
     < div  class ="bg" >
         < img  src ="home-default17.jpg"  width ="100%"  height ="100%;" >
     </ div >
< div  data-role ="widget"  data-widget ="nav4"  class ="nav4" >
             < nav >
                 < div  id ="nav4_ul"  class ="nav_4" >
                     < ul  class ="box" >
                         < li >
                             < a  href ="" >< span >我的卡通 </ span ></ a >
                         </ li >
                         < li >
                             < a  href ="" >< span >通通精彩 </ span ></ a >
                         </ li >
                         < li >
                             < a  href ="javascript:;" >< span >贴心服务 </ span ></ a >
                                                                    
                                
                             < dl >
                                 < dt >
                                     < a  href ="http://3g.weimob.com" >< span >贴心服务 </ span ></ a >
                                 </ dt >
                                 < dt >
                                     < a  href ="" >< span >网点查询 </ span ></ a >
                                 </ dt >
                                 < dt >
                                     < a  href ="#" >< span >集团服务 </ span ></ a >
                                 </ dt >
                                 < dt >
                                     < a  href ="" >< span >线路查询 </ span ></ a >
                                 </ dt >
                            
                             </ dl >
                         </ li >
                                                 </ ul >
                 </ div >
             </ nav >
             < script  type ="text/javascript" >
                nav4.bindClick(document.getElementById("nav4_ul").querySelectorAll("li>a"), document.getElementById("nav4_masklayer"));
             </ script >
         </ div >

</ body >

</html>  

css实现控制样式和布局：

*{ padding: 0;  margin: 0;}
.bg {
position:  absolute;
z-index:  -1;
top:  0;
left:  0;
right:  0;
bottom:  0;
opacity:  0.8;
}
ul, ol, li, dl {
list-style-type:  none;
}
.box {
width:  100%;
display:  -webkit-box;
display:  -moz-box;
-webkit-box-orient:  horizontal;
-moz-box-orient:  horizontal;
-webkit-box-sizing:  border-box;
-moz-box-sizing:  border-box;
}
.box > * {
-webkit-box-flex:  1;
-moz-box-flex:  1;
}
a:link, a:visited {
color:  #575757;
text-decoration:  none;
}
a {
text-decoration:  none;
-webkit-tap-highlight-color:  rgba(0, 0, 0, 0.35);
}
a:link, a:visited {
color:  #575757;
text-decoration:  none;
}
a {
text-decoration:  none;
-webkit-tap-highlight-color:  rgba(0, 0, 0, 0.35);
}

.nav4{
    height: 45px;
}
.nav4 ul{
    position: fixed;
    z-index: 200;
    bottom: 0;
    left: 0;
    width: 100%
}
.nav4 li{
    border: 1px solid rgba(190,190,190,1);
    height: 45px;
    border-bottom: 0;
    border-right: 0;
    position: relative;
    -webkit-box-shadow: inset 0 0 3px #fff;
}
.nav4 li:nth-of-type(1){ border-left;0;}
.nav4 li>a{
    font-size: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
     /* border:1px solid #f9f8f9; */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    border-bottom: 0;
    display: block;
    line-height: 45px;
    text-align: center;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f1f1f1), to(#dcdcdc), color-stop(35% ,#ededed), color-stop(50%, #e3e3e3) );
}
.nav4 li>a:only-child span{
    background: none;
    padding-left: 0;
}
.nav4 li>a.on + dl{
    display:  block;
}
.nav4 li>a span{
    color:  #4f4d4f;
    display:  inline-block;
    padding-left:  15px;
    background:  url(1.svg#2) no-repeat 4px 18px;
    -webkit-background-size:  9px auto;
    text-shadow: 0px 1px 0px #ffffff;
}
/* ********************* */
.nav4 dl{
    display: none;
    position: absolute;
    z-index: 220;
    bottom: 60px;
    left: 50%;
    width: 100px;
    margin-left: -50px;
    background: red;
     /* min-height:100px; */
    background: #e4e3e2;
     /* border:1px solid #afaeaf; */
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 3px #fff;
    background: url(2.svg#3) no-repeat center center;
    -webkit-background-size: 100%;
    background-size: 100%;
}
/* , .nav4 dl:after */
.nav4 dl:before{
    content: "";
    display: inline-block;
    position: absolute;
    z-index: 240;
    bottom: 0;
    left: 50%;
     /* width:0;
    height:0;
    border:8px solid red;
    border-color:#afaeaf transparent transparent transparent;
    margin-left:-8px;
    margin-bottom:-16px; */
    width: 10px;
    height: 8px;
    background:  url(1.svg#2) no-repeat center -55px;
    -webkit-background-size:  10px auto;
    bottom:  -7px;
    margin-left:  -5px;
}
/* .nav4 dl:after{
    z-index:241;
    border-color:#e4e3e2 transparent transparent transparent;
    margin-bottom:-15px;
} */
.nav4 dl dd{
    line-height: 45px;
    text-align: center;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(194,194,194,0.8)), to(rgba(194,194,194,0.8)), color-stop(50%, rgba(194,194,194,0.8)));
    background-size: 80% 1px;
    background-repeat: no-repeat;
    background-position:  center bottom;
     /* background: url(3.svg#4) no-repeat center bottom;
    -webkit-background-size:100px 1px; */
}
.nav4 dl dd:last-of-type{
    background: none;
}
.nav4 dl dd a{
    font-size:  15px;
    display: block;
    color: #4f4d4f;
    text-shadow: 0px 1px 0px #ffffff;
    white-space:  pre;
    overflow:  hidden;
    text-overflow:  ellipsis;
}
.nav4 .masklayer_div{
    display:  none;
    position:  fixed;
    top:  0;
    left:  0;
    width:  100%;
    height:  100%;
    z-index:  180;
    background:  rgba(0,0,0,0);
}
.nav4 .masklayer_div.on{ display:  block;}


.nav_4 ul{
    list-style-type: none;
    margin: 0px;
    padding: 0;
}
.nav_4 ul li {
    border:  1px solid rgba(190,190,190,1);
    height:  45px;
    width: 33%;
    border-bottom:  0;
    border-right:  0;
    position:  relative;
    float: left;
    -webkit-box-shadow:  inset 0 0 3px #fff;
}
.nav_4 dl {
    display:  none;
    position:  absolute;
    z-index:  220;
    bottom:  60px;
    left:  50%;
    width:  100px;
    margin-left:  -50px;
    border-radius:  5px;      /*  圆角边框  */
}
.nav_4 dl dt{
    border: 1px;
    line-height:  45px;
    text-align:  center;
    background:  -webkit-gradient(linear, 0 0, 100% 0, from(rgba(194,194,194,0.8)), to(rgba(194,194,194,0.8)), color-stop(50%, rgba(194,194,194,0.8)));
    background-size:  80% 1px;
    background-repeat:  no-repeat;
    background-position:  center bottom;
}
.nav_4 dl dt a{
    font-size:  15px;
    display:  block;
    color:  #4f4d4f;
    text-shadow:  0px 1px 0px #ffffff;
    white-space:  pre;
    overflow:  hidden;
    text-overflow:  ellipsis;
}  

 最后效果：