0

私は、slideDown を含む Web サイトを設計しています。

最初に、下の画像のようなテンプレートを設定しましたSlideDownBefore

各黒いブロックにカーソルを合わせると、ul リストが表示されます... しかし、カーソルを合わせると問題が発生します... ブロックの下のすべてのコンテンツが下に移動します (これは次の図に示されています)。

スライドダウン後

上下のすべてのコンテンツが浮いているため、絶対的な位置を指定することはできません (高さが固定されていません)。残りのコンテンツをそこに保持し、ホバー コンテンツをテキストの上に表示することによって、slideDown を取得するには他に何ができるでしょうか?

4

2 に答える 2

1

目的を達成するには、ブロック自体ではなく、内側のサブメニュー要素をslideDown（）する必要があります。このサンプルマークアップを検討してください。

​<div class="item" id="mybox">floating box
    <ul class="submenu" style="display: none;">
        <li>Subitem 1</li>
        <li>Subitem 2</li>
        <li>Subitem 3</li>
    </ul>
</div>
<p>More content... Just to illustrate</p>
<p>More content... Just to illustrate</p>​​​​​​

CSSは次のようになります。

.​item {
    position: relative; /* to hold absolutely positioned submenu inside */
    background: #2684b7;
    color: #fff;
    padding: 10px;
    float: left;
}

    .item .submenu {
        position: absolute; /* the menu would go on top of everything */
        background: #2684b7;
        width: 100%;
        left: 0;
    }

p {
    clear: both;
}

そして最後に、JavaScriptはシンプルです。アニメーションを防弾することを忘れないでください：</ p> 

$('#mybox').hover(
    function() { /* mouseover */
        $(this).find('.submenu').slideDown();
    }, 
    function() { /* mouseout */
        $(this).find('.submenu').slideUp();
    }​​​​​
);

jsFiddleの例は次のとおりです。http：//jsfiddle.net/zxrvC/

幸運を。</ p>

</ p>

于 2012-04-17T13:22:28.650 に答える
0

位置：relativeおよびz-index：55のdivを作成し、そのdiv内にposition：absoluteの新しいdivを追加し、幅も指定します。これが解決することを願っています。

よろしく

iijb

于 2012-04-17T13:05:27.783 に答える