精仿公众号菜单效果

基于微信开发的web应用经常会用到“微信菜单”，今天专门仿制了一下微信的菜单效果，把项目中的代码提取出来，方便以后使用、改进。

图片效果

HTML

<div id="nav">
    <ul>
        <li class="menu" data-show="off">
            <a href=""><i class="iconfont icon-caidan"></i>产品系列</a>
            <div class="submenu">
                <p><a href="">家用产品系列</a></p>
                <p><a href="">车用产品系列</a></p>
                <p><a href="">LIFAair滤芯</a></p>
                <div class="line"></div>
                <div class="down"></div>
                <div class="down-border"></div>
            </div>
        </li>
        <li class="menu">
            <a href=""><i class="iconfont icon-caidan"></i>在线购</a>
            <div class="submenu">
                <p><a href="">我的订单</a></p>
                <p><a href="">购物车</a></p>
                <p><a href=">U拍精选</a></p>
                <div class="line"></div>
                <div class="down"></div>
                <div class="down-border"></div>
            </div>
        </li>
        <li class="menu">
            <a href=""><i class="iconfont icon-caidan"></i>购物指南</a>
            <div class="submenu">
                <p><a href="/home/order">常见问题</a></p>
                <p><a href="">购买指引</a></p>
                <p><a href="">使用教程</a></p>
                <div class="line"></div>
                <div class="down"></div>
                <div class="down-border"></div>
            </div>
        </li>
    </ul>
</div>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
}
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%;
}
body {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, "Lantinghei SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    height: 100%;
    background-color: #f8f8f8;
}
#wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 80px;
}
#nav {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
}
#nav ul {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background-color: rgba(253, 253, 253, 1);
    position: relative;
}
#nav ul:after {
    content: "";
    display: table;
    clear: both;
}
#nav ul:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-bottom: 1px solid #999;
    width: 200%;
    height: 1px;
    transform: scale(0.5,0.5);
    transform-origin: 0 0;
    -webkit-transform: scale(0.5,0.5);
    -webkit-transform-origin: 0 0;
    box-sizing: border-box;
}
#nav ul li {
    float: left;
}

#nav ul li.menu i.iconfont {
    color: #777;
    padding-right: 3px;
    padding-top: 1px;
    font-size: 12px;
}
#nav ul li.menu {
    width: 33.33333333%;
    position: relative;
    text-align: center;
}
#nav ul li.menu:before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    border-left: 1px solid #999;
    width: 1px;
    height: 200%;
    transform: scale(0.5,0.5);
    transform-origin: 0 0;
    -webkit-transform: scale(0.5,0.5);
    -webkit-transform-origin: 0 0;
    box-sizing: border-box;
}
#nav ul li.menu > a {
    display: block;
    padding-top: 12px;
    padding-bottom: 12px;
    color: #555;
}
#nav .submenu {
    display: none;
    position: absolute;
    left: 4%;
    bottom: 54px;
    width: 92%;
    border-radius: 5px;
}
#nav .submenu .line {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 200%;
    width: 200%;
    border: 1px solid #888;
    z-index: -1;
    background-color: #fff;
    border-radius: 8px;
    transform: scale(0.5,0.5);
    transform-origin: 0 0;
    -webkit-transform: scale(0.5,0.5);
    -webkit-transform-origin: 0 0;
    box-sizing: border-box;
}
#nav .submenu .down {
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -6px;
    width: 0px;
    height: 0px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
    z-index: 2;
}
#nav .submenu .down-border {
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    width: 0px;
    height: 0px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #888;
    z-index: 1;
}
#nav .submenu p {
    padding-top: 12px;
    padding-bottom: 12px;
    width: 88%;
    margin: 0 auto;
    position: relative;
}
#nav .submenu p:first-child:after {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    border-top: 0px;
}
#nav .submenu p:after {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    border-top: 1px solid #999;
    width: 200%;
    height: 1px;
    transform: scale(0.5,0.5);
    transform-origin: 0 0;
    -webkit-transform: scale(0.5,0.5);
    -webkit-transform-origin: 0 0;
    box-sizing: border-box;
}
#nav .submenu p a {
    color: #333;
}
#nav .on {
    display: block;
}

js

$(function() {
    $('#nav li').click(function() {
        if($(this).attr('data-show') == 'on') {
            $(this).attr('data-show', 'off');
            $(this).find('.submenu').hide();
        } else {
            $(this).attr('data-show', 'on').siblings().attr('data-show', 'off');
            $(this).find('.submenu').show();
            $(this).siblings().find('.submenu').hide();
        }
        return false;
    });

    $('#nav li .submenu p a').click(function(event) {
        event.stopPropagation();
    })
});