Question

我正在尝试为网站创建全尺寸导航菜单。我的问题是当我打开它时标签向下移动所以我无法在页面上正确定位它。它不完全在页面顶部。在下面你可以看到我的代码。菜单应覆盖整个屏幕，打开时不应移动。如果有人可以帮助我，我将不胜感激。

的index.html

<body>
        <div class="nav" id="nav">
                <a href="javascript:void(0)" class="close" onclick="closeNav()">&times;</a>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Gallery</a>
                <a href="#">Contact</a>

              </div>

              <span id="open" class="open" onclick="openNav()">&#9776</span>
    <div class="content-wrapper">


    <div class="header-team">

        <img src="img/smoke_team.png">

      </div>
    </div>
      <script src="js/script.js"></script>
</body>

style.scss

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');

$main-font: 'Open Sans';

html,body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    box-sizing: border-box;
}

body {
    background-color: #000;
}

.header-team {
    display: flex;
    background-image: url("../img/teamimg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 200px 0px;
    height: 400px;
    width: 100%;
    margin: 8em auto 0em auto;
    animation-name: move-in;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    opacity: 0.75;
    justify-content: center;
    z-index: 1;
}

@keyframes move-in {
    from {
        background-position: 200px 0px;
    }
    to {
        background-position: top;
    }
}

.header-team img {
    align-self: center;
    width: 1000px;
    opacity: 0;
    margin-right: 200px;
    animation-name: move-smoke;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}

@keyframes move-smoke {
    from {
        margin-right: 200px;
    }
    to {
        margin-right: 0px;
    }
    from {
        opacity: 0;
    }
    to {
        opacity: 0.9;
    }
}



.open {
    color: grey;
    font-size: 30px;
    float: right;
    margin: 5.5em 1.3em 0em 0em;
    z-index: 99;
    display: block;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    }

    .open:hover {
        color: #a30000;
    }

  .nav {
    text-align: center;
    width: 0%;
    overflow-x: hidden;
    height: 100vh;
    z-index: 100;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    transition: 0.3s;
    display: block;
  }

  .nav a {
    clear: right;
    color: white;
    font-size: 26px;
    display: block;
    text-decoration: none;
    padding: 1.5em 0;
    transition: 0.3s;
    font-family: $main-font;
  }

  .nav a:first-child {
      font-size: 45px;
      margin-bottom: -30px;
      margin-top: -40px;
  }

  .close {
    float: right;
    margin: 0em 1em 1em 1em;
  }

  .nav a:not(:first-child):hover {
    color: #a30000;
    transition: 0.5s;
  }

的script.js

function openNav() {
    document.getElementById("open").style.display = "none";
    document.getElementById("nav").style.width = "100%";
  }

  function closeNav() {
    document.getElementById("nav").style.width = "0%";
    document.getElementById("open").style.display = "block";
  }

Answer 1

我希望我能正确理解你的问题。

要使.nav覆盖整个屏幕而不移动，只需添加

即可

top: 0;
left: 0;

到.nav样式。

布局发生变化，因为您正在更改display span的#open属性，该属性与页面上其他元素的位置进行交互。您可能正在寻找visibility css属性，它不会弄乱定位，只是说明元素是否可见。将openNav()和closeNav()中的相应行更改为

document.getElementById("open").style.visibility = "hidden";

和

document.getElementById("open").style.visibility = "visible";

导航打开时，正文向下移动（CSS，Javascript）

1 个答案: