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

Question

所以我想制作这个响应式菜单。在桌面上它看起来像这样：

并且在移动设备上，它应该看起来堆叠重叠在其下方的所有内容而不是将其向下推。所以不是这样的：

（按下按钮之前）

（按下按钮后）

可以看到下面的Slideshow被按下了，按钮上的菜单明显错位了。

请帮我解决这个问题，我是一个糟糕的后端开发人员。这是我的代码：

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

将z-index属性添加到.menu.responsiveclass.

Answer 2

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>

在不查看整个页面代码的情况下，这是您需要做的事情，或者我会在继续之前始终检查的事情。

为了 css 正常工作，请在头部添加此元标记 <meta name="viewport" content="minimal-ui, height=device-height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
其次，菜单应该堆叠在交互和显示层的较高位置，这样它就不会与页面上的其他元素混淆。这样做的一种方法是将标签放在页面最后的所有内容的底部（记住 css 菜单上的绝对定位 div）或像 +10000 那样放大它。
请尽量不要在事后添加响应能力，例如当用户单击时，这会在计算值与初始值发生冲突时产生很多问题。尽量把事情交给css。这是来自 w3school 的好代码，请按照说明进行操作。
定位问题计算图片高度；
实际上是您的图标被定位，其他所有东西都相对于它应该在的位置。因此，将您的图标作为第一项移动，然后将其下方的所有其他锚标记移动。这应该可以解决您的定位问题。

Answer 3

所以解决这个问题的答案是将响应式菜单class设置为绝对，你还必须使用right: 0; 所以它留在原地。之后我发现我可以将菜单链接向下移动，因为它们现在也是绝对的，以防止它们与按钮重叠。

感谢大家的帮助;)

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

I neeHelp at making a responsive menu

html

javascript

css

responsive-design