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

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

baidu

google

yahoo

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完成了菜单的简单效果，如果需要美化，请您在实际应用中自己搞一下吧，兼容性非常不错的，欢迎大家使用。