滑出導航：Z-指數發行

Question

編輯*根據第一個回覆，這可能不是能夠固定用z-index，因爲它與元素定位的問題。這可能是一個新帖子的時間，但如果您閱讀我對第一個回覆的評論，我可以用絕對位置來解決此主題的問題，但會出現另一個問題 - >設置具有絕對位置的元素的相對位置。 ..聽起來有點反直覺，哈哈。無論如何，由於問題完全不同並且值得不同的線程，因此將盡快刪除。

我試圖創建具有子菜單從上面（後面）滑出，停止下面的每個導航項目點擊垂直導航菜單。我現在設置了HTML，以便在它們各自的導航項目之後直接具有相關的子菜單，以便與位置相關，我可以設置jQuery以使子菜單的動畫設置爲頂部：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(); 

}); 

您還會注意到，我添加類單擊時改變導航項目的顏色和具有它的子菜單中打開。我想在點擊這個類時讓子菜單恢復...但這不起作用？但這是一個不同的問題，可能是另一個線程。

在此先感謝您的幫助。

Answer 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(); 
});