描述:类似微信公众号菜单样式,子菜单动态生成数量不固定,样式如下:
html
<nav class="wx_menu">
<dl>
<dt>短信/资费</dt>
<dd>
<ul class="dropdown-menu">
<li><a href="/wx/m/sms">短信</a></li>
<li><a href="/wx/m/data">流量</a></li>
<li><a href="/wx/m/price">资费</a></li>
<li><a href="/wx/m/partner">合伙人</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>
推广/兑换
</dt>
<dd>
<ul class="dropdown-menu">
<li><a href="/wx/m/partner_plan">积分介绍</a></li>
<li><a href="/WX/m/Extension/@ViewBag.MySharedInfo">推广会员</a></li>
<li><a href="/wx/wx_jfdd/shop">兑换礼品</a></li>
<li><a href="/wx/WX_FXJL/exshare">兑换积分</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>我的</dt>
<dd>
<ul class="dropdown-menu">
<li><a href="/wx/WX_JFJL/myscore">积分</a></li>
<li><a href="/wx/WX_FXJL/myshare">分享值</a></li>
<li><a href="/WX/WX_HHR/mymember">会员</a></li>
<li><a href="/WX/WX_HHR/myinfo">资料</a></li>
<li><a href="/WX/WX_HHR/myaddress">收件地址</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();
}
});
});
本例是底部对齐,关键样式是: top: auto;bottom: 100%;