javascript - 导航菜单在打开时会不断下推元素。为什么？

问题描述

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

我的问题是下一个：我应该如何让我的“汉堡包”菜单覆盖内容（打开 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 中调整窗口大小)

标签： javascripthtmlcss

javascript - 导航菜单在打开时会不断下推元素。为什么？

问题描述

解决方案

推荐阅读