最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jQuery下拉二级菜单导航带图片

来源:http://www.erdangjiade.com/ 二当家的 2015-08-21 07:08浏览(1457)

分享一个企业通用的企业二级下拉菜单,并且可附带该分类图片。代码很简单,请看下方菜单导航js代码。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery下拉二级菜单导航带图片
分类:导航菜单 > 下拉导航 难易:初级
查看演示 下载资源: 108

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

HTML

首先在#nav放置多个列表li,并且在子级加ol下拉列表和图片.nav-img

<div id="nav" class="nav">
    <ul>
        <li id="mainlevel_01" class="first-crl mainlevel">
            <a class="nav-a" href="http://www.erdangjiade.com">走进西王</a> 
            <div id="sub_01">
                <ol>
                    <li><a href="http://www.erdangjiade.com">集团概况</a><a href="http://www.erdangjiade.com">组织架构</a><a href="http://www.erdangjiade.com">领导关怀</a></li>
                    <li><a href="http://www.erdangjiade.com">董事长风采</a><a href="http://www.erdangjiade.com">公司管理</a><a href="http://www.erdangjiade.com">社会关注</a></li>
                </ol>
                <span class="nav-img"><img src="images/nav-img-01.jpg"></span>
            </div>
        </li>
    </ul>
</div>

jQuery

当导航菜单.mainlevel下级有div的时候,鼠标在当前区域悬浮和离开时的触发事件

$(function() {
    $(".mainlevel:has(div)").hover(function() {
        $(this).children("div").stop(true, true).slideDown(300)
    }, function() {
        $(this).children("div").stop(true, true).slideUp(1)
    })
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/422.html
评论0
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2