1

"Son of Suckerfish" を使用して、ドロップダウン (実際には右側にポップアップする) ナビゲーション メニューを作成しています。

一部のサブメニューは非常に長く、スクロールしなければ見えない位置にあります。メニューが常にフォールドの上にあることを確認する方法 (JavaScript/jQuery を使用) はありますか?

4

1 に答える 1

0

結局、答えが見つからなかったので、自分で解決策を作りました。

以下は私が使用したコードです（jQueryが必要です）：

var winHeight = $(window).height();
$navULs = $('#nav ul');
$navULs.find('ul').each(function(i,v) {
    $this = $(v);
    var ulHeight = $this.height();
    var parentHeight = $this.closest('li').height();
    var parentTop = $this.offset().top;
    var parentBottom = parentTop + parentHeight;
    if ((winHeight - parentTop) < ulHeight) {
        if (parentBottom < ulHeight) {
            $this.css({
                'margin-top': '0px',  // remove margin-top (added by suckerfish css) as it screws up the calculations
                'top': '-' + (parentTop) + 'px'  // move the menu up by the amount of px available above the parent's top
            });
        } else {
            $this.css('bottom', '0px');  // v basic, if sub menu will drop too much shove it up (css does the heavy lifting here)
        }
    }
});

このブログ投稿で説明しようとしました。

于 2013-07-22T22:16:10.820 に答える