7

私はこの問題を抱えており、まだ概念的なレベルで理解しています.特定の要素がコンテナーの外側にあるかどうかをどのように検出できますか (overflow:hidden; プロパティが宣言されたコンテナー);

必要なコンテキストは次のとおりです。

マウス ホバー アイテム 3 を想像してみましょう。

通常は次のとおりです。

item 1
item 2
item 3 - sub 3.1
       - sub 3.2

このように、サブ 3.2 はフローから外れて表示されないか、または (オーバーフローの代わりにコンテナーで clearfix を使用すると) 他のページ コンテンツの上にドロップ ダウンします)、これを解決するには、これを考えますアイテム 3 をマウスでホバーするとします。

item 1
item 2 - sub 3.1
item 3 - sub 3.2

これを行うには、おそらく、要素がフローから外れているかどうかを検出し、それが彼のものである場合は、すべてを X px にプッシュする必要があります。

これがこれを解決するための良いアプローチである場合、要素がフローの外にあるかどうかをどのように検出できますか?

これが適切なアプローチではない場合、別のアプローチを提案していただけますか?

ps- jquery メニュー ソリューションとして superfish を使用しています。

4

2 に答える 2

1

私は簡単なjQueryソリューションを持っているかもしれません.あなたの質問はそのようにタグ付けされています.純粋なCSSソリューションが必要な場合、または間違ったプラグインを使用した場合は、別の方法を考えることができます...スーパーフィッシュを自分で使用したことはありませんが、「垂直スタイル」をチェックアウトしましたこのサイトの例: http://users.tpg.com.au/j_birch/plugins/superfish/

では、項目 3 にマウスオーバーすると、項目 1 のレベルでサブ 3.1 が表示されますか? このプラグインのコードをざっと見てみると、次のように終わる行を持つ showSuperfishUl() を変更するだけでよいと思います。

.find('>ul:hidden').css('visibility','visible');

アイテムとサブが同じ高さであると仮定し、コンテキストを $(this) に置き換えると、次の行に似たものを追加できます。

if($(this).parent().nextAll().length < $(this).children("li").length) // lower space < subs heights ?
{
    var totalHeight=0;
    $(this).parent().prevAll().each(function(index)
    {
        if(index < $(this).children("li").length) // without this you would have all subs at the level of item 1
        {
            totalHeight += $(this).outerHeight(true); // true for margins
        }
    });
    ... .css("top","-"+totalHeight+"px");
}

実際のコンテキストで機能するかどうかを確認するには、実際のページをセットアップする必要があります...「トップ」はおそらくこの相対/フロート：左レイアウトでは機能しませんが、「概念レベル」ではほとんどそれです。

于 2012-08-10T09:41:18.270 に答える
0

説明したようにすべてを表示したいだけの場合は、position:relativeandalign:bottomまたはposition:absoluteを使用して css を使用してそれを行うことができbottom:?pxます。

于 2012-01-11T18:33:28.753 に答える