1

amazon.com のようなドロップダウン/スライドアウト メニューを作成して、「Shop By Department」にマウスを合わせてからすべてのオプションにマウスを合わせると、別のメニューが右にスライドして、マウスを置いたものに基づいてコンテンツを表示するようにするにはどうすればよいですか? (可能であれば、javascript なしで CSS3 のみ)?

また、Amazon のような複数の部門があると仮定すると、次のような複数の div を持つことは実用的ですか。

<div id="department1" style="display:none">
Content for department1
</div>
<div id="department2" style="display:none">
Content for department2
</div>
...

ドロップダウンを取得した後にそのスライドアウト部分を取得するには、div id「currentdepartment」を呼び出して、「部門名」をマウスオーバーすると変更されるコンテンツを変更します。通常は次のようにします: $("#currentdepartment").html($ ("#部門1").html())

理想的なパフォーマンスのためにこれを行うためのより良い方法はありますか? （速度とスペースに基づいて[同じページでマウスオーバーしたときに各部門のコンテンツに複数のdivを配置すると、無駄になる可能性があるようです]）

4

2 に答える 2

1

Amazon は、このために独自の Jquery を構築しました。もちろん、彼らは Jquery や Sizzle などの他のライブラリを使用していますが、スクリプトを直接使用することはできず、この特定のスクリプトを直接使用するつもりもありません。

つまり、Amazon は基本的に CSS スプライト、Jquery、および Sizzle を使用して、独自のカスタム スクリプトをコード用に開発しているということです。コードを確認したところ、Amazon パート 2 を構築していない限り、5500 行を超える行が含まれているとは思えません。

したがって、作成が簡単なドロップダウン メニューを探すことをお勧めします。そのための出発点はダイナミック ドライブです。

使いやすいメニューとチュートリアルがあり、それらを使用するようにガイドします。あなたの質問に答えたことを願っています

于 2013-07-05T06:04:40.867 に答える