分享一个商场常用的三级导航下拉菜单,你可以自定义商品类别和链接。打开下拉弹出层有动画animate的效果,鼠标离开后会自动隐藏下拉弹出层。
一级导航菜单
<div class="list" id="navlist">
<ul id="navfouce">
<li><a href="http://www.sucaihuo.com/">素材火</a></li>
<li><a href="http://www.sucaihuo.com/">网站模板</a></li>
<li><a href="http://www.sucaihuo.com/">jQuery特效</a></li>
<li><a href="http://www.sucaihuo.com/">网站源码</a></li>
</ul>
</div>
一级导航菜单对应的二级菜单h3和三级菜单.mcate-item-bd
<ul class="sublist clearfix">
<li>
<h3 class="mcate-item-hd"><span>服饰内衣</span></h3>
<p class="mcate-item-bd">
<a href="http://www.sucaihuo.com">女装</a>
<a href="http://www.sucaihuo.com">男装</a>
<a href="http://www.sucaihuo.com">内衣</a>
<a href="http://www.sucaihuo.com">家居服</a>
<a href="http://www.sucaihuo.com">配件</a>
<a href="http://www.sucaihuo.com">羽绒</a>
<a href="http://www.sucaihuo.com">呢大衣</a>
<a href="http://www.sucaihuo.com">毛衣</a>
</p>
</li>
</ul>
鼠标悬浮菜单和离开触发事件
lista.hover(function() {
lista.removeClass("now");
$(this).addClass("now");
clearTimeout(time);
var index = list.find("a").index($(this));
box.find(".cont").hide().eq(index).show();
var _height = box.find(".cont").eq(index).height() + 54;
box_show(_height)
}, function() {
time = setTimeout(function() {
box.find(".cont").hide();
box_hide();
}, 50);
lista.removeClass("now");
lista.eq(olda).addClass("now");
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791