Fiz do mesmo jeito que a explicação porém o menu lateral aparece ativo toda vez em que carrego a página e mesmo invertendo a ordem dos seletores não estou conseguindo fazer que ele apareça escondido ao carregar a página.
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
Fiz do mesmo jeito que a explicação porém o menu lateral aparece ativo toda vez em que carrego a página e mesmo invertendo a ordem dos seletores não estou conseguindo fazer que ele apareça escondido ao carregar a página.
Boa noite Gabryel, tudo bem?
Posta seu código aqui usando o símbolo </> no editor de comentários, pra que possamos entender melhor o que pode estar ocorrendo, e te ajudar! Por gentileza.
ótimos estudos!
<header class="cabecalho-mobile">
<button class="menu-botao" aria-label="Menu">
<i class="fa-solid fa-bars"></i>
</button>
<button>
<i class="fa-solid fa-square-share-nodes"></i>
</button>
</header>
<nav class="menu__aberto--mobile menu-ativo">
<a href="#" class="link-ativo"><i class="fa-solid fa-house"></i>Inicio</a>
<a href="#"><i class="fa-solid fa-address-card"></i>Currículo</a>
<a href="#"><i class="fa-solid fa-ranking-star"></i>Certificados</a>
<a href="#"><i class="fa-solid fa-laptop-code"></i>Projetos</a>
<a href="#"><i class="fa-solid fa-envelope-open-text"></i>Enviar proposta</a>
<a href="#footer"><i class="fa-solid fa-circle-info"></i>Informações de contato</a>
</nav>
.menu__aberto--mobile{
width: 266px;
height: 391px;
background: linear-gradient(180.23deg, #000000 -7.23%, #38474A 108.24%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25);
border-radius: 0px 0px 10px 0px;
margin: .25rem 0 0 .25rem;
display: flex;
align-items: left;
justify-content: left;
flex-direction: column;
position: absolute;
z-index: 2;
opacity: 0;
transition: .25s;
}
.menu-ativo{
opacity: 1;
transition: .25s;
}
const menuBotao = document.querySelector('.menu-botao')
const menu = document.querySelector('.menu__aberto--mobile')
menuBotao.addEventListener('click', () => {
menu.classList.toggle('menu-ativo')
});