我需要帮助制作响应式菜单

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"> 中添加这个元标记
2. 其次，菜单应该在交互和显示层上堆叠得更高，这样它就不会与页面上的其他元素混淆。这样做的一种方法是将标签放在页面最后的所有内容的底部（记住在菜单 div 上使用 css 绝对定位）或像 +10000 那样放大它。
3. 请尽量不要在用户点击后添加响应性，因为计算值与初始值发生冲突会在未来产生大量问题。尽可能把事情留给css。 w3school 的代码很好，请按照说明进行操作。
4. 针对定位问题计算图片的高度；
5. 实际上是您的图标被定位，其他所有东西都相对于它应该在的位置。因此，将您的图标作为第一项移动，然后将其下方的所有其他锚标记移动。这应该可以解决您的定位问题。

Answer 2

因此，解决问题的方法是将响应式菜单类设置为绝对，您还必须使用 right: 0; 使其保持原位。 之后我发现我可以将菜单链接向下移动，因为它们现在也是绝对的，以防止它们与按钮重叠。

感谢大家的努力；）

Answer 3

将z-index 属性添加到 .menu.responsive 类。