分享一款常用的手机微信底部菜单导航,点击即可显示二级下拉菜单,失去焦点便隐藏。
在#menu放置li菜单
<div id="menu">
<ul>
<li>
<div class="menu_li"><img src="images/coin.png" width="10" /> 网页特效</div>
<img class="line" src="images/line.png" width="1">
<span>
<img src="images/navbg4.png" width="100%">
<div>
<a href="http://www.sucaihuo.com">html5模板</a>
<a href="http://www.sucaihuo.com">手机js特效</a>
<a href="http://www.sucaihuo.com">微测试</a>
<a href="http://www.sucaihuo.com">微游戏</a>
</div>
</span>
</li>
<li>
<div class="menu_li"><img src="images/coin.png" width="10" /> 手机特效</div>
<img class="line" src="images/line.png" width="1" />
<span>
<img src="images/navbg4.png" width="100%" />
<div>
<a href="http://www.sucaihuo.com">咨询购买</a>
</div>
</span>
</li>
</ul>
</div>
jQuery
点击li菜单触发事件
window.onload = function() {
$('#menu ul li').each(function(j) {
$('#menu ul li').eq(j).removeClass("on");
$('#menu ul li span').eq(j).animate({bottom: -$('#menu ul li span').eq(j).height()}, 100);
});
}
$('#menu ul li').each(function(i) {
$(this).click(function() {
if ($(this).attr("class") != "on") {
$('#menu ul .on span').animate({bottom: -$('#menu ul .on span').height()}, 200);
$('#menu ul .on').removeClass("on");
$(this).addClass("on");
$('#menu ul li span').eq(i).animate({bottom: 35}, 200);
$('.footer_front').show();
} else {
$('#menu ul li span').eq(i).animate({bottom: -$('#menu ul li span').eq(i).height()}, 200);
$(this).removeClass("on");
$('.footer_front').hide();
}
});
});
$('.footer_front').click(function() {
$('#menu ul .on span').animate({bottom: -$('#menu ul .on span').height()}, 200);
$('#menu ul .on').removeClass("on");
$(this).hide();
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791