Тело движется вниз при открытии навигации (CSS, Javascript) - PullRequest
Новая
       8

Тело движется вниз при открытии навигации (CSS, Javascript)

0 голосов
/ 21 мая 2018

Я пытаюсь создать полноразмерное меню навигации для сайта.Моя проблема в том, что тег открывается вниз, когда я открываю его, поэтому я не могу правильно расположить его на странице.Это не совсем в верхней части страницы.Внизу вы можете увидеть мой код.Меню должно охватывать весь экран и не должно двигаться, когда оно открыто.Буду признателен, если кто-то может мне помочь.

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";
  }

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Надеюсь, вы правильно ответите 

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";
  }
@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;
    
    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;
      
  }

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

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

.nav {
  top: 0;
left: 0;
}
<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>
0 голосов
/ 21 мая 2018

Надеюсь, я правильно понял ваш вопрос.

Чтобы .nav покрывал весь экран и не двигался, просто добавьте 

top: 0;
left: 0;

к .nav стилю.

Макет меняется, потому что вы изменяете свойство display диапазона #open, которое взаимодействует с позициями других элементов на странице.Вы, вероятно, ищете свойство visibility css, которое не портит позиционирование, а просто говорит, является ли элемент видимым или нет.Измените соответствующие строки в openNav() и closeNav() на 

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

и 

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