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

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

淘建站为您提供更多_导航菜单_滑动导航_导航_菜单，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 289 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：导航菜单 > 滑动导航难易程度：中级

一级导航

<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");
    })
})