AH科技网

全部频道

您的当前位置：首页jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果_jquery

jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果_jquery

来源：AH科技网


在网站建设中，特别是做商城和产品网站，通常会用到导航弹出菜单，像是jquery写的仿京东导航菜单，一个经典的左侧多级导航菜单，学会了可以任意改变布局。京东菜单已经有不少JS前端爱好者仿写过，今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单，精简版代码
先看下jquery仿京东导航效果：

前端html代码如下：
代码如下:

  • baidu


    • baidu



  • goolge


    • google



  • yahoo


    • yahoo



  • microsoft


    • microsoft





    js代码：
    代码如下:

    $(function(){
    $("ul li").each(function(index){
    $(this).mouseover(function(){
    var obj=$(this).offset();
    var xobj=obj.left+190+"px";
    var yobj=obj.top-50+"px";
    $(this).css({"width":"190px","z-index":"9999","border-right":"none","background":"#fff"});
    $("ul > div:eq("+index+")").css({"left":xobj,"top":yobj}).show();
    }).mouseout(function(){
    $("ul > .tips").hide();
    $(this).css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"})
    })

    })
    $("div").each(function(){
    $(this).mouseover(function(){
    $(this).prev("li").css({"width":"190px","z-index":"9999","border-right":"none","background":"#fff"})
    $(this).show();
    }).mouseout(function(){
    $(this).hide();
    $(this).prev("li").css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"});
    })
    })
    })


    效果图如下，

    jQuery仿京东左侧菜单效果，适合商城产品导航，这里没有做的那么细，只是使用CSS结合jQuery完成了菜单的简单效果，如果需要美化，请您在实际应用中自己搞一下吧，兼容性非常不错的，欢迎大家使用。

    显示全文