-1
I’m making a responsive menu using visual studio. However, when I am leaving the page at 768px, the items (start, mission, about...) that should be when I click on the menu hambuguer, does not appear.
code
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
//Fazendo aparecer os itens
const navLinks = document.querySelectorAll('.nav-links li');
//Fazendo o clique do menu funcionar
burger.addEventListener('click', ()=>{
nav.classList.toggle('nav-active');
//Animações links
navLinks.forEach((link, index) => {
if(link.style.animation){
link.style.animation = '';
}else{
link.style.animation = `navlinkFade 0.5s ease forwards ${index/7+1.5}s`
}
});
//Transformando em X
burger.classList.toggle('toggle');
});
}
navSlide(); *{
margin: 0px;
/*Distancia entre os itens*/
padding: 0px;
box-sizing: border-box;
}
nav{
display:flex;
/*Jogar os itens para o canto da página*/
justify-content: space-around;
align-items: center;
min-height: 8vh;
/*Mudando a cor de fundo do menu*/
background-color: rgb(40, 113, 122);
/*Fonte do menu*/
font-family: 'Poppins', sans-serif;
}
.logo{
/*Mudando a cor da fonte do nome*/
color: white;
/*Deixando o texto formatado*/
text-transform: uppercase;
/*Mudando o espaçamento das letras*/
letter-spacing: 5px;
/*Tamaho da letra*/
font-size:20px;
}
.nav-links{
/*Ajustando o tamanho e posição dos itens*/
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li{
/*Sumindo com os pontos que ficavam nos itens*/
list-style: none;
}
.nav-links a{
/*Mudando a cor dos itens*/
color: white;
/*Mudando o espaçamento das letras dos itens*/
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
/*Não deixando o menu hambuguer visivel */
display:none;
/*aparecendo a maozinha quando clica no menu hambuguer*/
cursor: pointer;
}
.burger div{
/*Ajeitando o menu Hambuguer*/
width: 25px;
height: 3px;
background-color:white;
margin:5px;
transition: all 0.3s ease;
}
/*Ajustando a altura*/
@media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
/*Ajustando a altura minima*/
@media screen and (max-width:768px){
body{
overflow-x: hidden;
}
/*ajustando os itens para se adequar a altura min.*/
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top:8vh;
/*Arrumando o menu hambuguer*/
background-color: rgb(40, 113, 122);
display:flex;
flex-direction: column;
align-items: center;
width: 50%;
/*Ajeitando a transição parar abrir o menu hambuguer*/
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
/*para aparecer o menu hambuguer quando a tela tiver pequena*/
display: block;
}
}
/*Quando se clica no menu hambuguer, consegue abrir os itens*/
.nav-active{
transform: translateX(0%);
}
/*Animações quando se clica no menu hamburguer*/
@keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
/*Transformando o menu em X*/
.toggle .line1{
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px, -6px);
} <!DOCTYPE html>
<html lang="pt-br">
<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" >
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<title>Novo Projeto</title>
<link rel="stylesheet" href="css/style.css">
</head>
<!--Menu responsivo-->
<body>
<nav>
<div class="logo">
<h4>Teste</h4>
</div>
<ul class="nav-links">
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Missão</a></li>
<li><a href="#">Portifólio</a></li>
<li><a href="#">Contatos</a></li>
</ul>
<!--Menu hambuguer-->
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="javs/app.js"></script>
</body>
</html>