1

edit* 最初の返信によると、これは要素の配置の問題であるため、z-index では修正できない可能性があります。これは新しい投稿の時間かもしれませんが、最初の返信に対する私のコメントを読んでいただければ、このスレッドの問題を絶対位置で修正できますが、別の問題が発生します->絶対位置を持つ要素の相対位置を設定します。 .. それは少し直感に反するように聞こえます (笑)。とにかく、問題はまったく異なり、別のスレッドに値するため、これはすぐに削除されます.

サブメニューが上 (および後ろ) からスライドし、クリックされた各ナビゲーション項目の下で停止する垂直ナビゲーションメニューを作成しようとしています。私は現在、関連するサブメニューをそれぞれのナビゲーション項目の直後に配置するように HTML を設定しているため、相対的な位置を使用して、jQuery を設定してサブメニューを top:0 にアニメートし、常に関連するナビゲーション項目の真下に移動できます。 .

後続のナビゲーション項目に、z-index を削減するクラスを追加するように設定しました。これにより、下のアイテムの上に配置しながら、メニューが上からナビゲーションアイテムの下からスライドできるようになることを望んでいました (メニューの z-index が低いため)。

どちらも機能していません。以下にリンクされている私のフィドルからわかるように...メニューが上部の項目の上をスライドするだけでなく、下部の項目が邪魔にならないように押し出しています。

これを行うには無数の方法があると確信していますが、それぞれのナビゲーション項目に対して配置する必要がある複数のサブメニューを処理するには、相対位置が唯一の方法であると感じました。しかし、明らかに私のアプローチには欠陥がないわけではありません...

そのため、どんな助けでも大歓迎です。

http://jsfiddle.net/pGfCX/57/

jQuery:

$('.row').click(function() {

    // make all siblings AFTER row clicked get this class to reduce z-index and allow the menu to display above these rows (while still remaining below the rows above)

    $(this).nextAll().addClass('rowZ');
    $(this).next('.menu').show()
    $(this).next('.menu').animate({'top':'0'});

});

// when menu is out, the row clicked is the header row, upon clicking this, the related menu (and by default, all subsequent menus within) animate back up and hide

$('.rowHead').click(function() {

    $(this).next('.menu').animate({'top':'-100%'});
    $(this).next('.menu').hide();

});

また、クリックしてサブメニューを開いたときにナビゲーション項目の色を変更するクラスを追加していることにも注意してください。このクラスをクリックするとサブメニューが戻ってくるようにしたかったのですが、それもうまくいきませんか? しかし、それは別の問題であり、別のスレッドの可能性があります。

あらゆる助けを前もって感謝します。

4

1 に答える 1

1

サブメニュー項目を他のメニュー項目の上に表示したい場合は、 を使用position:absoluteしてドキュメントの通常の流れからそれらを削除する必要があります。サブメニュー項目の高さがposition: relative考慮され、メニュー項目要素が下に押し下げられます。

例: http://jsfiddle.net/Ps73y/3/

HTML

<div id="container">
    <div class="menu-item">
        <div>Menu Item 1</div>
        <div class="sub-menu-items">
            <div class="sub-menu-item">Sub Menu Item 1</div>            
            <div class="sub-menu-item">Sub Menu Item 2</div>            
        </div>
    </div>
    <div class="menu-item">
        <div>Menu Item 2</div>
        <div class="sub-menu-items">
            <div class="sub-menu-item">Sub Menu Item 1</div>            
            <div class="sub-menu-item">Sub Menu Item 2</div>            
        </div>
    </div>
</div>

CSS

.sub-menu-items{
   position: absolute;
   display: none;
   top: 0;
   background: red;
   z-index:1100;
}

.sub-menu-item{
    width:120px;
    cursor:pointer;
    position: relative;
}

.menu-item{
    background:yellow;
    width:120px;
    position:relative;
    left:0;
    cursor: pointer;
}

#container{
    background:grey;
    width:120px;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:0;
}

Javascript

$(".menu-item").click(function(){
    $(this).find(".sub-menu-items").css("top", $(this).height());
    $(this).find(".sub-menu-items").slideToggle();
});
于 2012-11-30T00:51:36.157 に答える