jquery は京東ナビゲーション/模倣淘宝モールの左側のカテゴリ ナビゲーション ドロップダウン メニューの効果_jquery を模倣します

• baidu /li>
  

  baidu

  ;
  
  
  
  
  

  google
  

  
  
• yahoo




yahoo


li>microsoft



microsoft

html{color:#666;background; :#FFF;}
body,div,dl ,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,i,fieldset,legend,input, textarea,p,blockquote,th,td{margin:0 ;padding:0;}
body{font:12px/1.3 arial,helvetica,clean,sans-serif,5b8b4f53;}
h1,h2,h3 ,h4,h5,h6{font-size:100% ;font-weight:normal}
table{border-collapse:collapse;border-spacing:0;}
img{border:none;}
a{テキスト装飾:なし; カラー:#666 ;}
a:hover{テキスト装飾:下線; カラー:#FF6600;}
ul,li{リストスタイルタイプ:なし;}
q:before,q:after{content: '';}
sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}
/* すべてリセット * /
body{ margin:100px;}
ul li{line-height:30px; ソリッド #E5D1A1; テキスト-align:center:-1px; FFFDD2; 位置:相対; z-インデックス: 1; ヒント: 絶対; 幅: 150 ピクセル; 背景:#fff; :none;}



js コード:

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 ソリッド #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","ボーダー":"1px ソリッド #E5D1A1"," 背景":"#FFFDD2"});
})
})
})
🎜>

レンダリングは次のとおりです。