jQuery三级下拉导航菜单

收藏

分享一个商场常用的三级导航下拉菜单，你可以自定义商品类别和链接。打开下拉弹出层有动画animate的效果，鼠标离开后会自动隐藏下拉弹出层。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

一级导航菜单

<div class="list" id="navlist">
    <ul id="navfouce">
        <li><a href="http://www.erdangjiade.com/">素材火</a></li>   
        <li><a href="http://www.erdangjiade.com/">网站模板</a></li>   
        <li><a href="http://www.erdangjiade.com/">jQuery特效</a></li>
        <li><a href="http://www.erdangjiade.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.erdangjiade.com">女装</a>
            <a href="http://www.erdangjiade.com">男装</a>
            <a href="http://www.erdangjiade.com">内衣</a>
            <a href="http://www.erdangjiade.com">家居服</a>
            <a href="http://www.erdangjiade.com">配件</a>
            <a href="http://www.erdangjiade.com">羽绒</a>
            <a href="http://www.erdangjiade.com">呢大衣</a>
            <a href="http://www.erdangjiade.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");
});