1

(長い) ドロップダウンの問題を解決するために、Chris Coyier の「長いドロップダウン」プラグインを使用しています。ちなみに、ドロップダウンメニューがメインメニューの上にあるため、top: 100%代わりに使用しています。top: 0

問題

長いドロップダウンの例

通常メニュー

予想される

jQuery の部分:

$(function () {
            var maxHeight = $(window).height() - ($("ul.dropdown").offset().top + $("ul.dropdown").outerHeight());

            $("ul.dropdown > li").hover(function () {
                var $container = $(this),
                 $list = $container.find("ul"),
                 $anchor = $container.find("a"),
                 height = $list.height() * 1.1,       // make sure there is enough room at the bottom
                 multiplier = height / maxHeight;     // needs to move faster if list is taller

                // need to save height here so it can revert on mouseout            
                $container.data("origHeight", $container.height());

                // so it can retain it's rollover color all the while the dropdown is open
                $anchor.addClass("hover");

                // make sure dropdown appears directly below parent list item    
                $list
                    .show();

                // don't do any animation if list shorter than max
                if (multiplier > 1) {
                    $container
                        .css({
                            overflow: "hidden"
                        })
                        .mousemove(function (e) {
                            var offset = $container.offset();
                            var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                            if (relativeY > $container.data("origHeight")) {
                                $list.css("top", -relativeY + $container.data("origHeight"));
                            };
                        });
                }
            }, function () {

                var $el = $(this);

                // put things back to normal
                $el
                    .height($(this).data("origHeight"))
                    .find("ul")
                    .css({ top: "100%" })
                    .hide()
                    .end()
                    .find("a")
                    .removeClass("hover");
            });
        });

アップデート

JSフィドル

top:100%JS Fiddle でoful.dropdown ulルールを変更してみてくださいtop: 0— これが私の問題です。

アップデート v2

無駄なコンテンツを削除しました。

アップデートv3

みんな助けてくれてありがとう — これで私は自分の問題をよりよく整理できるようになりました.

このフィドルを見てください— これは私の問題です。

そして、これは私が期待しているものです。

4

1 に答える 1

2

ルールを完全に削除するtopと、絶対に配置されたサブメニューが、メイン メニュー要素が終了する高さから開始されるようになります (これが望ましい動作です)。これは と同じように見えますtop: 100%;が、私が理解していることから、そのルールを取り除きたいと考えています。

こちらをご覧ください：http://jsfiddle.net/wB7fn/4/

編集

これは私が得ることができる限り近いものです: http://jsfiddle.net/wB7fn/9/。

メイン要素の幅に関する問題は、すべてのサブ メニュー要素が収まるように手動で拡張することで解決する必要がありました。コメントで説明したように、親要素にはposition: relative適切なz-index. 最後の変更はa、メイン メニューの要素を作成することでした。そのため、親要素display: blockの全幅を埋めます。li

EDIT2

ここでもJS のtop問題を修正しました: http://jsfiddle.net/wB7fn/10/

于 2013-06-04T16:10:51.727 に答える