最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery三级下拉导航菜单

来源:http://www.erdangjiade.com/ 沐浴春风 2015-09-12 14:40浏览(1496)

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

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

jQuery三级下拉导航菜单
分类:导航菜单 > 下拉导航 难易:中级
查看演示 下载资源 下载积分: 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"); 
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/500.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2