Dangdang.com や Taobao_jquery などの主流の電子商取引 Web サイトの商品分類ナビゲーション メニューの模倣

この記事では、ほとんどの一般的な電子商取引 Web サイトと同様に、カテゴリ ナビゲーション メニューを実装します。メニューの実装の難しさは主に CSS の記述にあり、JS はあまり使用されません。詳細な実装については、すべてのコードがsidebar.htmlファイルに含まれています。位置が絶対 p に設定されている場合、この p はちょうど 1px 左にオフセットされ、左側のメニュー バーがその境界線を押し、選択されたメニューには白い境界線があり、ギャップが形成されます。 ) 画像内のマーク その2を各接続で改行せずに実現するには
要素の表示属性を inline-block に設定できます。これは、ほとんどのブラウザーで有効です。同じ効果を実現する条件付きコメント

コードをコピーします コードは次のとおりです: (3) 途中で見る 最初の 2 つのメニューにはアイコンがあり、それぞれのメニューには 2 つのアイコンがあり、1 つは初期状態、もう 1 つはマウスオーバー状態です。命名規則は、初期状態が tubiao.jpg の場合、アイコンのサイズは 220px * 25px でなければなりません。では、各メニューのアイコンを指定するにはどうすればよいでしょうか。たとえば、次のコードで確認できます。

<!--[if IE 7]> 
<style type="text/css"> 
#sidebar-menu p.menu-panel p.link-wrapper { 
display : inline; 
zoom : 1; 
} 
</style> 
<![endif]-->

コードは次のとおりです。 🎜>

このとき、画像上でマウスをスライドさせる際に初期状態の画像アドレスを指定する必要はありませんが、

以下は完全なソース コード ファイルです。sidebar.html

<p class="menu-item" style="background-image : url(images/tubiao.jpg);"> 
<span>图书音像</span> 
</p>

コードをコピーします
コードは次のとおりです: