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

收藏

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

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

查看演示

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

下载资源 下载积分： 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)
    })
});