JS和Z-index對於菜單有困難

我在一個固定頭文件的菜單上工作，並且在顯示方式上遇到困難。菜單是一組4個主要鏈接，點擊後會彈出另一個包含更多鏈接的div。彈出div設置爲覆蓋最初的主要鏈接，並在其下方 - 與www.huffingtonpost.com的水平導航菜單類似。JS和Z-index對於菜單有困難

我遇到的問題是，下拉菜單的.png背景圖像覆蓋了用戶點擊的初始主鏈接。例如，如果用戶點擊「研究工具」，由此產生的彈出式菜單背景涵蓋「研究工具」鏈接，使用戶不能看到他們目前正在進入的菜單。

這也導致一些問題用戶試圖點擊另一個主要導航鏈接，如從「Research Tools」菜單激活並嘗試點擊「Instruction Resources」鏈接 - 背景圖片覆蓋該鏈接的一部分，使其幾乎不可點擊。有沒有辦法讓4個主要導航鏈接停留在彈出菜單div上？

這是我遇到的問題的圖像：http://imgur.com/BlN0jbz

我曾嘗試與z-index的亂搞，但似乎沒有任何工作。如果需要更多詳細信息，請將代碼的重要剪輯附加在小提琴http://jsfiddle.net/gevBe/中，請告訴我。這裏是包含在小提琴中的JavaScript部分：

$(document).ready(function() { 
$('#toggleLink').on("click", function() { 
    $('#showme1').slideToggle(600); 
    $('#showme2,#showme3,#showme4').hide(400); 
}); 

$('#toggleLink2').on("click", function() { 
    $('#showme2').slideToggle(600); 
    $('#showme1,#showme3,#showme4').hide(400); 

}); 

$('#toggleLink3').on("click", function() { 
    $('#showme3').slideToggle(600); 
    $('#showme1,#showme2,#showme4').hide(400); 
}); 

$('#toggleLink4').on("click", function() { 
    $('#showme4').slideToggle(600); 
    $('#showme1,#showme2,#showme3').hide(400); 
}); 

$('#toggleLink,#toggleLink2,#toggleLink3,#toggleLink4').on("click", function() { 
    $('#cover').show(); 
}); 
$('#cover,.button1,.button2,.button3,.button4').click(function() { 
    $('#showme1,#showme2,#showme3,#showme4').hide(400); 
    $('#cover').hide(); 
}); 
});

來源

2013-07-09 user2333018

使用表格進行佈局在10年前停止使用。我建議閱讀一些關於現代編碼實踐的教程。 –

你基本上在尋找標籤嗎？如果是這樣，他們會去不同的頁面？ – Deep

查找選項卡的順序，彈出式選單菜單中的菜單設計。同樣，如果你檢查huffingtonpost.com網站，他們的菜單就是我的目標。 – user2333018

我編輯了你的jsfiddle。檢查#showme2。剛剛增加了它的top。

我假設你正在使用z索引錯誤。 Z-index用於確定元素在哪個「層」上。假設我們有兩個absolute或fixed定位元素與z-index:1和z-index:2。 z-index:1中的一個將顯示在z-index:2之一。

如果您的下拉框中包含初始鏈接，則應使其顯示在初始鏈接下方。你可以通過使用top

#yourbox{ 
top:10px; 
}

上面的代碼與推ID yourbox 10px的遠從頂部的元素。

在附註上，使用表格製作導航菜單有點尷尬。我建議您使用這種結構

<ul> 
<li>Link one</li> 
<li>Link two</li> 
</ul> 

ul li { 
display:inline; 
}

這將產生相同的結果 - 水平定位的元素。除了它看起來不那麼笨拙。

來源

2013-07-09 18:50:41 Euphe

感謝您提供關於表格的提示 - 將會更新該部分。問題依然存在，雖然...我明白你對圖層的含義，但是我一直試圖實現的菜單設計有一部分覆蓋/突出了原始的主要導航鏈接。我很難解釋，這就是我引用赫芬頓郵報網站的原因，因爲他們的菜單幾乎正是我想要做的。菜單框的頂部看起來像一個選項卡，所以主navi鏈接看起來就像選項卡的標題，下面有一組擴展鏈接。 – user2333018

由於某些原因，當我將表格中的z-index（即將在您建議的構造中設置）設置爲100時，主navi鏈接仍然顯示在彈出菜單的標籤後面，而不是頂部。彈出菜單中包含的鏈接仍然顯示正常。 – user2333018

我建議您使用top來將彈出框從頂部移開，因此，無論頂部顯示什麼都不重要 - 即使視覺碰撞，它們也會位於不同的位置。 – Euphe

JS和Z-index對於菜單有困難

回答

相關問題