Minha página se inicia com o menu lateral já ativo, como fazer com que ela se inicie com o menu inativo, e só se ative ao receber o primeiro click?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Minha página se inicia com o menu lateral já ativo, como fazer com que ela se inicie com o menu inativo, e só se ative ao receber o primeiro click?
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HZC │ Home</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/estilos.css">
</head>
<body>
<header class="cabecalho">
<button class="cabecalho__menu" aria-label="Menu"><i></i></button>
<img src="assets/img/logo.svg" alt="Logotipo da HZC" class="cabecalho__logo">
<button class="cabecalho__notificacao" aria-label="Notificação"><i></i></button>
</header>
<nav class="menu-lateral menu-lateral--ativo">
<img src="assets/img/logo.svg" alt="Logotipo da HZC" class="menu-lateral__logo" style="align-self: center">
<a href="#" class="menu-lateral__link menu-lateral__link--inicio menu-lateral__link--ativo">Início</a>
<a href="#" class="menu-lateral__link menu-lateral__link--videos">Vídeos</a>
<a href="#" class="menu-lateral__link menu-lateral__link--picos">Picos</a>
<a href="#" class="menu-lateral__link menu-lateral__link--integrantes">integrantes</a>
<a href="#" class="menu-lateral__link menu-lateral__link--camisas">Camisas</a>
<a href="#" class="menu-lateral__link menu-lateral__link--pinturas">Pinturas</a>
</nav>
<script src="index.js"></script>
</body>
</html>CSS
@font-face {
font-family: 'icones';
src: url(../font/icones.ttf);
}
body {
background-color: #1D232A;
font-family: 'Open Sans', 'icones', sans-serif;
color: #FFFFFF;
}
.cabecalho {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #15191c;
padding: 8px 16px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
}
.cabecalho__menu i::before {
content: "\e904";
font-size: 24px;
}
.cabecalho__notificacao i::before {
content: "\e906";
font-size: 24px;
}
.cabecalho__logo {
width: 40px;
}
.menu-lateral {
display: flex;
flex-direction: column;
background-color: #15191c;
width: 75vw;
height: height 100vh;
position: absolute;
left: -100vw;
transition: 0.25s;
z-index: 99;
}
.menu-lateral--ativo {
left: 0;
transition: 0.25s;
}
.menu-lateral__logo {
width: 118px;
align-self: center;
padding: 16px;
}
.menu-lateral__link {
height: 64px;
color: #95999c;
padding-left: 64px;
display: flex;
align-items: center;
}
.menu-lateral__link--ativo {
color: #FFFFFF;
padding-left: 56px;
border-left: 8px solid #FFFFFF;
}
.menu-lateral__link::before {
content: "\e900";
width: 24px;
height: 24px;
font-size: 24px;
position: absolute;
left: 24px;
}
.menu-lateral__link--inicio::before {
content: "\e902";
}
.menu-lateral__link--videos::before {
content: "\e90e";
}
.menu-lateral__link--picos::before {
content: "\e909";
}
.menu-lateral__link--integrantes::before {
content: "\e903";
}
.menu-lateral__link--camisas::before {
content: "\e900";
}
.menu-lateral__link--pinturas::before {
content: "\e90a";
}JS
const botaoMenu = document.querySelector('.cabecalho__menu')
const menuLateral = document.querySelector('.menu-lateral')
botaoMenu.addEventListener('click', () => {
menuLateral.classList.toggle('menu-lateral--ativo')
})
ola, só apagar a classe "menu-lateral--ativo" do HTML.
Essa classe sera adicionada ou removida pelo JS com o evento do click + o método classList.toggle
Muito obrigado, Noberto!
Olá, eu estava com a mesma dúvida que a do Igor. Fiz o teste conforme Noberto explicou e deu certo, mas ainda fiquei com uma outra dúvida. No CSS temos:
.menu-lateral--ativo { left: 0; transition: .25s; }
Ele continua funcionando mesmo depois de excluído a classe "menu-lateral--ativo" do HTML. Poderiam me explicar melhor o por quê?