Dynamic menu, auto align

describe ： Similar to the menu style of wechat official account , The number of submenus dynamically generated is not fixed , The style is as follows ：

 

html

    <nav class="wx_menu">
        <dl>
            <dt> SMS / postage </dt>
            <dd>
                <ul class="dropdown-menu">
                    <li><a href="/wx/m/sms"> SMS </a></li>
                    <li><a href="/wx/m/data"> Traffic </a></li>
                    <li><a href="/wx/m/price"> postage </a></li>
                    <li><a href="/wx/m/partner"> partner </a></li>
                </ul>
            </dd>
        </dl>
        <dl>
            <dt>
                 Extension / exchange 
            </dt>
            <dd>
                <ul class="dropdown-menu">
                    <li><a href="/wx/m/partner_plan"> Introduction to integral </a></li>
                    <li><a href="/WX/m/Extension/@ViewBag.MySharedInfo"> Promote members </a></li>
                    <li><a href="/wx/wx_jfdd/shop"> Exchange gifts </a></li>
                    <li><a href="/wx/WX_FXJL/exshare"> Redeem points </a></li>
                </ul>
            </dd>
        </dl>
        <dl>
            <dt> my </dt>
            <dd>
                <ul class="dropdown-menu">
                    <li><a href="/wx/WX_JFJL/myscore"> integral </a></li>
                    <li><a href="/wx/WX_FXJL/myshare"> Shared value </a></li>
                    <li><a href="/WX/WX_HHR/mymember"> members </a></li>
                    <li><a href="/WX/WX_HHR/myinfo"> Information </a></li>
                    <li><a href="/WX/WX_HHR/myaddress"> Mailing address </a></li>
                </ul>
            </dd>
        </dl>
    </nav>

css（less）

.wx_menu {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 200000;
    background-color: transparent;
    text-align: center;

    dl {
        background-color: #fff;
        border: solid 1px #ddd9d9;
        text-align: center;
        padding: 10px 0;
        margin-bottom: 4px;
        position: relative;
        display: inline-block;
        width: 30%;

        dd {
            display: none;
            width: 100%;
            margin: 0 0 6px 0;
            padding: 0;
            transition: 1s;
            animation: flipInX,.4s,1;
            position: absolute;
            top: auto;
            bottom: 100%;
        }
    }

    ul {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: 0,2px,4px,#000;

        li {
            display: block;
            padding: 12px 0;
            text-align: center;
            background-color: #fff;
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #e0e0e0;
        }

        li:not(:last-child) {
            border-bottom: none;
        }
    }
}

js

$(function () {
    $(".wx_menu").find("dt").click(function () {
        var _obj = $(this);
        if (_obj.next("dd").css("display") == "block") {
            _obj.next("dd").css({ "display": "none" });
        } else {
            _obj.next("dd").css({ "display": "block" }).parent().siblings().find("dd").hide();
        }
    });
});

This example is the bottom alignment , The key style is ： top: auto;bottom: 100%;