我需要幫助制作響應式菜單

Question

所以我想做這個響應式菜單。 在桌面上看起來像這樣：

在移動設備上，它應該看起來疊疊在它下面的所有東西上，而不是把它往下推。 所以不是這樣：

（在按下按鈕之前）

（按下按鈕后）

您可以看到下面的幻燈片被按下了，並且通常在按鈕上的菜單明顯錯位。

請幫我解決這個問題，我是一個糟糕的后端開發人員。 這是我的代碼：

 function myFunction() { var x = document.getElementById("menu"); if (x.className === "menu") { x.className += " responsive"; } else { x.className = "menu"; } }

 .menu.icon { display: none; } @media screen and (max-width: 965px) {.menu a {display: none;}.menu a.icon { float: right; display: block; } } /* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon */ @media screen and (max-width: 965px) {.menu.responsive { background-color: white; position: relative; }.menu.responsive a.icon { position: absolute; right: 0; top: 0; }.menu.responsive a { float: none; display: block; text-align: left } }

 <div class="mainheader"> <div class="logo"> <img src="../bilder/Logo_Koeln_Fliesen_Esch.jpg"> </div> <div id="menu" class="menu"> <a href="start.html">Unternehmen</a> <a href="start.html">Leistungen</a> <a href="referenzen.html">Referenzen</a> <a href="start.html">Kontakt</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <img class="bigicon" src="../bilder/menu.png"> </a> </div> </div>

Answer 1

 function myFunction() { var x = document.getElementById("menu"); if (x.className === "menu") { x.className += " responsive"; } else { x.className = "menu"; } }

 .menu.icon { display: none; } @media screen and (max-width: 965px) {.menu a {display: none;}.menu a.icon { float: right; display: block; } } /* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon */ @media screen and (max-width: 965px) {.menu.responsive { background-color: white; position: relative; }.menu.responsive a { float: none; display: block; text-align: right } }

 <img src="../bilder/Logo_Koeln_Fliesen_Esch.jpg"> </div> <div id="menu" class="menu"> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <img class="bigicon" src="../bilder/menu.png"> </a> <span> <a href="start.html">Unternehmen</a> <a href="start.html">Leistungen</a> <a href="referenzen.html">Referenzen</a> <a href="start.html">Kontakt</a> </span> </div> </div>

無需查看整個頁面代碼，這是您需要做的事情，或者我在繼續之前總是會檢查的事情。

1. 為了讓 css 正常工作，在 head <meta name="viewport" content="minimal-ui, height=device-height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">中添加此元標記<meta name="viewport" content="minimal-ui, height=device-height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2. 其次，菜單應該在交互和顯示層上堆疊得更高，這樣它就不會與頁面上的其他元素混淆。 這樣做的一種方法是將標簽放在頁面最后的所有內容的底部（記住 css 在菜單 div 上的絕對定位）或像 +10000 一樣放大它。
3. 請盡量不要在用戶點擊之后添加響應性，這會在計算值與初始值發生沖突時產生很多問題。 盡量把事情留給 css。 這是 w3school 的好代碼，請按照說明進行操作。
4. 對於定位問題，計算圖像的高度；
5. 它實際上是你的圖標被定位，其他所有東西都相對於它應該在的位置。 因此，將您的圖標作為第一項移動，然后將其下方的所有其他錨標記移動。 這應該可以解決您的定位問題。

Answer 2

所以解決這個問題的方法是將響應菜單 class 設置為 absolute ，你也必須使用right: 0; 所以它保持在原地。 之后我發現我可以將菜單鏈接向下移動，因為它們現在也是絕對的，以防止它們與按鈕重疊。

感謝您幫助大家的努力；）

Answer 3

將z-index屬性添加到.menu.responsive class。