手机网站实现左边弹出导航菜单点击一级分类展开二级分类

下面介绍一下手机网站常见的左边弹出导航菜单，并且点击一级分类展开二级分类的功能实现方法。

HTML代码：

<ul id="topmeau" class="wap_menu hidden-md hidden-lg"><li class="current-menu-item menu_lists active"><div class="wap_menu1"><p class="left"><a title="网站首页" href="http://127.0.0.1/wordpress/" class="toplink">网站首页</a></p></div></li>

<li class=" menu_lists"><div class="wap_menu1"><p class="left"><a title="关于我们" href="http://127.0.0.1/wordpress/?page_id=6055" class="toplink">关于我们</a></p></div></li>

<li class=" menu_lists"><div class="wap_menu1"><p class="left"><a title="产品中心" href="http://127.0.0.1/wordpress/?cat=185" class="dropdown-toggle" aria-haspopup="1">产品中心</a></p><p class="right">+</p></div>

<ul role="menu" class=" wap_menu2">

<li class=" nav-sub-item"><a title="产品分类一" href="http://127.0.0.1/wordpress/?cat=186" class="zilink">产品分类一</a></li>

<li class=" nav-sub-item"><a title="产品分类四" href="http://127.0.0.1/wordpress/?cat=189" class="zilink">产品分类四</a></li>

<li class=" nav-sub-item"><a title="产品分类二" href="http://127.0.0.1/wordpress/?cat=188" class="zilink">产品分类二</a></li>

</ul>

</li>

<li class=" menu_lists"><div class="wap_menu1"><p class="left"><a title="新闻中心" href="http://127.0.0.1/wordpress/?cat=193" class="dropdown-toggle" aria-haspopup="1">新闻中心</a></p><p class="right">+</p></div>

<ul role="menu" class=" wap_menu2">

<li class=" nav-sub-item"><a title="公司新闻" href="http://127.0.0.1/wordpress/?cat=197" class="zilink">公司新闻</a></li>

<li class=" nav-sub-item"><a title="常见问题" href="http://127.0.0.1/wordpress/?cat=198" class="zilink">常见问题</a></li>

<li class=" nav-sub-item"><a title="行业动态" href="http://127.0.0.1/wordpress/?cat=195" class="zilink">行业动态</a></li>

</ul>

</li>

<li class=" menu_lists"><div class="wap_menu1"><p class="left"><a title="成功案例" href="http://127.0.0.1/wordpress/?cat=190" class="dropdown-toggle" aria-haspopup="1">成功案例</a></p><p class="right">+</p></div>

<ul role="menu" class=" wap_menu2">

<li class=" nav-sub-item"><a title="成功案例一" href="http://127.0.0.1/wordpress/?cat=191" class="zilink">成功案例一</a></li>

<li class=" nav-sub-item"><a title="成功案例二" href="http://127.0.0.1/wordpress/?cat=192" class="zilink">成功案例二</a></li>

</ul>

</li>

<li class=" menu_lists"><div class="wap_menu1"><p class="left"><a title="在线留言" href="http://127.0.0.1/wordpress/?page_id=7330" class="toplink">在线留言</a></p></div></li>

<li class=" menu_lists"><div class="wap_menu1"><p class="left"><a title="联系我们" href="http://127.0.0.1/wordpress/?page_id=6061" class="toplink">联系我们</a></p></div></li>

</ul>

JS代码：

// 手机左边弹出导航

$(".menu_icon,.navigation").click(function () {

$(".black_cloth").show();

$(".wap_menu").animate({"left": "0"}, 200);

$("body").animate({"left": "250px"}, 200);

$("body").css("overflow", "hidden");

$(".wrap_footer").animate({"left": "250px"}, 200);

})



// 点击一级分类展开二级分类

$(".wap_menu>li.menu_lists>.wap_menu1>p.right").click(function () {

if ($(this).parent().siblings(".wap_menu2").css("display") == "block") {

$(this).parents(".menu_lists").find(".wap_menu2").slideUp();

$(this).html("+");

return;

}

$(".wap_menu li.menu_lists .wap_menu1 p.right").html("+");

$(".wap_menu2").slideUp();

$(this).html("-");

$(this).parent().siblings(".wap_menu2").slideDown();

})

CSS代码：

.wap_menu {width: 250px;position: fixed;top: 0px;left: -250px;height: 100%;text-align: left;z-index: 10000001;background: #9e845a;}

.wap_menu li.menu_tit {font-size: 18px;font-weight: bold;background: rgba(255, 255, 255, 0.3);position: relative;padding: 15px 10px;color: #fff;}

.wap_menu li.menu_tit span {font-size: 20px;position: absolute;top: 12px;right: 15px;border-bottom: none;z-index: 1000;}

.wap_menu li {margin-bottom: 2px;font-size: 14px;position: relative;}

.wap_menu li .wap_menu1 {line-height: 24px;font-size: 16px;text-transform: Uppercase;background: rgba(255, 255, 255, 0.1);position: relative;}

.wap_menu li p {padding: 10px 10px; margin-bottom:0;}

.wap_menu li .wap_menu1 a {display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding-right: 25px;color: #ffffff;}

.wap_menu li .wap_menu1 p.left {float: none;}

.wap_menu li .wap_menu1 p.right {width: 15%;text-align: center;color: #fff;position: absolute;top: 0;right: 0;float: none;z-index: 1000;}

.wap_menu li .wap_menu2 {display: none;}

.wap_menu li .wap_menu2 a {display: block;background: none;color: rgba(255, 255, 255, 0.8);overflow: hidden;font-size: 14px;border-bottom: rgba(255, 255, 255, 0.1) solid 1px;padding: 10px;}

.wap_menu li .wap_menu2 a i {float: left;width: 4px;height: 4px;background-color: #fff;margin: 8px 10px 0 5px;}

.wap_menu li .wap_menu2 a span {float: left;width: 85%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}