jQuery仿京东首页左侧菜单导航

收藏

本文分享下京东首页左侧二级导航菜单效果，代码很简洁。

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

查看演示

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

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

一级导航

<div class="dd-inner">
    <div  class="item fore1">
        <h3><a href="http://channel.jd.com/electronic.html" target="_blank">家用电器</a></h3>
        <i>></i> 
    </div>
    <div class="item fore2">
        <h3><a href="http://shouji.jd.com/" target="_blank">手机</a>、<a href="http://shuma.jd.com/" target="_blank">数码</a>、<a href="http://mobile.jd.com/" target="_blank">京东通信</a></h3>
        <i>></i> 
    </div>
</div>

二级导航请看#index_menus_sub

<div style="display: none;" class="dorpdown-layer" id="index_menus_sub">
    <div class="item-sub">
        <div class="item-brands">
            <div class="brands-inner">
                <a target="_blank" class="img-link" href="http://jmall.jd.com/shop/midea/index.html?erpad_source=erpad">
                    <img width="83" height="35" src="http://img10.360buyimg.com/vclist/jfs/t832/286/5445725/2411/8aae93c1/54d9eeeeN993b74f4.jpg">
                </a>
      .......
            </div>
        </div>
    </div>
</div>

jQuery

$(function() {
    $(".dd-inner").children(".item").hover(function() { //一级导航悬浮
        $(this).addClass("hover").siblings(".item").removeClass("hover");
        var index = $(this).index();
        $(".dorpdown-layer").children(".item-sub").hide();
        $(".dorpdown-layer").children(".item-sub").eq(index).show();

    }) $(".dd-inner").hover(function() { //整个导航菜单悬浮，是否显示二级导航到出厂
        $("#index_menus_sub").show();
    },
    function() {
        $("#index_menus_sub").hide();
        $('.item').removeClass("hover");
    }) $("#index_menus_sub").children(".item-sub").hover(function() { //二级导航悬浮
        var index = $(this).index();
        $(".dd-inner").children(".item").eq(index).addClass("hover");
        $("#index_menus_sub").show();
    },
    function() {
        $("#index_menus_sub").hide();
        $(".dd-inner").children(".item").removeClass("hover");
    })
})