Question

重要提示在我提出这个问题之前：对我来说（因此你也是如此）只显示有关被查询媒体的CSS部分要简短得多，因为它会是太多无用的代码/信息否则。含义 - 请将您的浏览器调整为CSS中提到的大小（宽度480px或更小）以查看我在说什么。不，我没有使用bootstrap ......

我的问题是下一步：我应该如何让我的“汉堡包”菜单覆盖内容（打开onclick）而不是将其推下来？
如果它可以在没有任何JS的情况下完成更好，但请记住，滑动效果或缓入进/出 - 不是我正在寻找的东西。

这是片段：

function myFunction() {
    var x = document.getElementById("menu");
    if (x.style.display === "block") {
        x.style.display = "none";
    } 
    else {
        x.style.display =  "block";
    }
}

@media only screen and (max-width: 480px) {
    
    .networks, .sidenav, .image-row, .foot1, .foot3 {
    display: none;
    }
    
    body {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #e1e1e1;
    }
    
    .page-wrap {
    display: block;
    margin-top: 0px;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    }
    
    .logo {
    display: inline-block;
    float: left;
    width: 75%;
    margin-left: 2.5%;
    }
    
    .logoImg {
    width: 200%;
    }
    
    .menuIcon {
	display: inline-block;
    float: right;
	width: 10%;
    margin-top: 6%;
	margin-right: 5.5%;
    border: none;
    z-index: 3;
    }

    .navButton {
    display: block;
    width: 100%;
    background-color: #e1e1e1;
    border: none;
    z-index: 3;
    }
    
    .navButton:focus {
    outline: none;
    }
    
    #menu {
    display: none;
    position: relative;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 2.5%;
    padding-bottom: 2.5%;
    z-index: 3;
    }
    
    .main {
    display: block;
    width: 90%;
    height: auto;
    padding-bottom: 7.5%;
    margin-top: 2.5%;
    margin-left: 5%;
    margin-right: 5%;
    z-index: 1;
    }
    
    .textbox {
	display: block;
    width: 95%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.25em;
    text-align: justify;
    }
    
    .myPhoto {
    display: block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    }
    
    .foot2 {
    display: block;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
    font-size: 1.25em;
    color: #324B64;
    }
    
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    
    <link rel="stylesheet" href="test.css">
    <script src="myScript.js"></script>
    
    <title>Luka Novak</title>
</head>

<body>
<div class="page-wrap">
        
    <div class="header">
        <div class="logo">
            
        </div>
        <div class="networks">
            <a href="#"><img src="facebook-symbol.svg" class="socialnet" alt="facebook"></a>
            <a href="#"><img src="instagram-symbol.svg" class="socialnet" alt="instagram"></a>
        </div>
            <div class="menuIcon">
            <button onclick="myFunction()" class="navButton">
                <img src="https://cdn3.iconfinder.com/data/icons/gray-toolbar/512/menu-512.png" 
                     alt="menu" 
                     class="iconImg">
            </button>
            </div>
    </div>
    
    <div class="sidenav col-5" id="menu">
        <a href="#" class="navlink">about us</a>
        <a href="#" class="navlink">services</a>
        <a href="#" class="navlink">contact</a>
    </div>
    
    <div class="main col-18">
        
        <article class="textbox">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
        </article>
        
        <div class="image-row">
            <div class="image1">
            
            </div>
                
            <div class="image2">
                    
            </div>
                
            <div class="image3">
                
            </div>
        </div>
    </div>
    
    
    
    <div class="footer col-24">
        <p class="foot1">Some info</p>
        <p class="foot2">design by me</p>
        <p class="foot3">More info</p>
    </div>
    
</div>
    
</body>    

</html>

如果该片段看起来很奇怪（如在jsfiddle，加上没有注册菜单可点击的话），这里是CodePen链接：https://codepen.io/anon/pen/VxmMrJ
（记得在codepen中调整窗口大小）

Answer 1

在菜单ID上将您的位置从相对位置更改为绝对值，并将margin-top更改为20％;这应该会在您的信息之上移动菜单。

干杯伴侣。

Answer 2

检查此代码笔link

单击按钮时，将其位置设为绝对位置。这样，它不会干扰打开的菜单。

将此添加到您的css

.menu-button-enable{
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 4;

}

将此添加到js

function myFunction() {
   var x = document.getElementById("menu");
    var mButton = document.querySelector(".menuIcon");
   if (x.style.display === "block") {
       x.style.display = "none";
     mButton.classList.remove("menu-button-enable");

   } 
   else {
       x.style.display =  "block";
     mButton.classList.add("menu-button-enable");
   }
}

Answer 3

将内容叠加在一起的方法是position: absolute;。通过这种方式和一些定位，您可以将菜单放在内容之上，如下所示：

只需将您的媒体查询中的#menu规则替换为480px，它就能正常运行：）

#menu {
  position: absolute;
  display: none;
  width: 90%;
  top: 15%;
  left: 0;
  right: 0;
  margin: auto;
  height: auto;
  z-index: 3;
}

导航菜单在打开时继续按下元素。为什么？

3 个答案: