1

amazon.comおよびwalmart.comには、部門にカーソルを合わせるとフライアウト機能があります。メニューと同じように機能しますが、リンクの完全なリストを含む実際の長方形のウィンドウがホバーに表示されます。

その機能の名前を見つけようとしています。「フライアウト」は適切なのだろうか？そして2番目の質問として、同様のことを行うjQueryプラグインがあります。フライアウトプラグインを検索してみましたが、実際にはいくつかありますが、私が望むものではないようです。

4

3 に答える 3

2

アレックスが言ったように...それはそれほど難しいことではありません...実際、あなたがしなければならないことはhtmlの単純なリストです：

<div id="menu">
    <ul>
        <li>
            <div class="derpartment-title"><a href="#">Item 1</a></div>
            <div class="submenu">
                <ul>
                    <li><a href="#">Item 1.1</li>
                    <li><a href="#">Item 1.2</li>
                    <li><a href="#">Item 1.3</li>
                </ul>
            </div>
        </li>
        <li>
            <div class="derpartment-title"><a href="#">Item 2</a></div>
            <div class="submenu">
                <ul>
                    <li><a href="#">Item 2.1</li>
                    <li><a href="#">Item 2.2</li>
                    <li><a href="#">Item 2.3</li>
                </ul>
            </div>
        </li>
    </ul>
</div>

次に、CSSで.submenuクラスを非表示にします。

.submenu {
    display: none;
}

そして、jqueryを使用して、ホバーされたリスト要素にクラスを追加します。

$('#menu li').bind('mouseenter',function(){
    $(this).addClass('hovered');
}).bind('mouseleave',function(){
    $(this).removeClass('hovered');
});

次に、CSSで、ホバーされたサブメニューにそれぞれのプロパティを追加します。

.hovered .submenu {
display: block;
left: 100px /* or the width of the menu or even an auto width, don't know if works with auto */
}

基本的にはそれで動作するはずです...次に、リンクや背景などに必要なスタイルプロパティを追加するだけです。

于 2009-11-10T21:34:11.687 に答える
1

ASP.NETAJAXHoverMenuに似ていると思います。

于 2009-11-10T20:26:05.957 に答える
1

それで、ウェブサイトを見てみましたが、思ったよりも簡単です。

あなたがインターネットで見つけることができる他のメニューと比較して、これは特定の効果とアニメーションを欠いています。

Firebugをざっと見てみると、すべてのコンテンツが非表示になり、参照<li>要素（CSSでスタイル設定）に関連付けられたままになります。
マウスを使ってメニュー項目に移動すると、CSSがからnavSaMenuItemMiddleに変わりnavSaMenuItemMiddleOpen、絶対位置のdivがメニュー項目の内容で埋められます。

スクリプトはこれであり、Amazon.com独自のものです。

于 2009-11-10T20:50:25.103 に答える