Когда экран меньше 768 пикселей, появляется меню гамбургера.И он перемещается вправо со свойством transform: translateX (100%), так что он перемещается вправо, и поэтому он не появляется на моем экране, когда я нажимаю на меню гамбургера, оно возвращается, но когда оно сохраняетсяиспользует пространство, которое я не хочу.Проблема есть.
Когда меню скрыто, оно использует пробел справа и увеличивает мою ширину и снимает маску со всей страницы
Я даю это в проверке кода и этоПоместив все правильно, ширина увеличивается, будет ли возможность это исправить?
У меня здесь есть кодовая ручка:
``` https://codepen.io/Marvinfx/pen/XWroWxW ```
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener('click' ,()=>
// Toggle Nav */
{nav.classList.toggle('nav-active');
//Animate Links */
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation="";
} else {
link.style.animation = `navLinksFade 0.5s ease forwards ${index / 7 + 0.3}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
* {
margin:0px;
padding: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-transition-box-sizing:border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
}
nav{
display:flex;
justify-content:space-around;
align-items:center;
min-height:8vh;
background-color:#5d4954;
font-family: 'Poppins', sans-serif;
}
.logo {
color:rgb(226,226,226);
text-transform: uppercase;
letter-spacing: 5px;
font-size:20px;
}
.nav-links {
display:flex;
justify-content: space-around;
width:30%;
}
.nav-links li {
list-style:none;
}
.nav-links a {
color:rgb(226,226,226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size:14px;
}
.burger {
display:none;
cursor:pointer;
}
.burger div {
width:25px;
height:3px;
background-color:rgb(226,226,226);
margin:5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1024px) {
.nav-links {
width:68%;
}
}
@media screen and (max-width:768px) {
body {
overflow-x:hidden;
}
.nav-links {
position: absolute;
right:0px;
height:92vh;
top:8vh;
background-color:#5d4954;
display:flex;
flex-direction:column;
align-items:center;
width:50%;
transform:translateX(100%); /* 100 % */
transition: transform .5s ease-in;
}
.nav-links li {
opacity:0;
}
.burger {
display:block;
}
}
.nav-active {
transform: translateX(0%);
}
@keyframes navLinksFade {
from {
opacity:0;
transform: translateX(50px);
}
to {
opacity:1;
transform:translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
opacity:0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Navigation</title>
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Works</a>
</li>
<li><a href="#">Projects</a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script type = "text/javascript" src = "js/js.js"></script>
</body>
</html>
Спасибо!