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

Web サイトの構築、特にショッピング モールや製品の Web サイトでは、通常、jQuery で書かれた模倣 JD ナビゲーション メニュー、古典的な左側のマルチレベル ナビゲーション メニューなどのナビゲーション ポップアップ メニューが使用され、レイアウトは次の時点で変更できます。意思。 JD メニューは、多くの JS フロントエンド愛好家によって模倣されています。今日、Ant Network は、JD Mall を模倣したマルチレベルの製品カテゴリ メニューを共有します。まず、コード
の模倣 JD を見てみましょう。ナビゲーション効果:



フロントエンド HTML コードは次のとおりです:

コードをコピー コードは次のとおりです。

• 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 コード:

コードをコピー

コードは次のとおりです。 < ;script type="text/javascript"> $(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 ソリッド #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"});
})
})
})
🎜>

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

jQuery は、ショッピング モールの商品に適した JD.com の左側のメニュー効果を模倣します。ここではあまり詳しく説明しませんが、CSS と jQuery を組み合わせてメニューを美しくする必要がある場合は、実際のアプリケーションで試してみてください。それを使うために。