Account Deleted
OlĂĄ, Paulo! Eu sou o Alberto.
Meus parabéns pelo seu trabalho duro e por completares este desafio. Eu tenho algumas sugestÔes sobre este desafio que podem te ajudar a melhorar a sua solução.
Ao se clicar no menu hamburger, vocĂȘ poderia mudar a tonalidade da pĂĄgina para uma mais escura na versĂŁo Mobile, utilizando a seguinte tĂ©cnica:
- Passo 1: HTML - Adicione um novo elemento,
divcom a classedarker, como filho direto debodyao seuindex.html:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div class="darker"></div>
...
</body>
</html>
Ă por meio deste elemento que vocĂȘ poderia aplicar o efeito de escuridĂŁo, quando o menu hamburger for clicado pelo usuĂĄrio.
- Passo 2: CSS - Adicione as seguintes regras CSS, ao seu estilo:
.darker {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
opacity: 0;
visibility: hidden;
/* VocĂȘ pode mudar para uma cor escura de sua preferĂȘncia */
background-color: #555;
/* VocĂȘ pode mudar para uma transição de sua preferĂȘncia */
transition: 0.5s ease-in-out opacity;
}
.darker.active {
opacity: 1;
visibility: visible;
}
Isso farĂĄ com que haja um fundo escuro sobre toda pĂĄgina (efeito de escuridĂŁo), mas para isso ter efeito, vocĂȘ deveria modificar o seu JavaScript, conforme o passo 3.
- Passo 3: JavaScript - Agora ao se clicar no menu hamburger, em vez de adicionar a classe
activeao seu elementomain, adicione esta classe ao novo elemento criado no passo 1 (<div class="darker"></div>). Isso farĂĄ com que a classeactive, aplique o efeito de escuridĂŁo sobre a pĂĄgina, conforme vocĂȘ perguntou.
EntĂŁo, Paulo! Estas sĂŁo as minhas sugestĂ”es para a sua solução sobre este desafio. Espero sinceramente que elas possam te ajudar a melhorĂĄ-la. Se vocĂȘ tiver qualquer dĂșvida, problema, ou pergunta, ao seguir estes passos, saiba que vocĂȘ pode me chamar, ou mesmo pedir ajuda em outros membros da plataforma.
Alberto,
Feliz Codificação :)
Marked as helpful
@paulo-xavier
Posted
OlĂĄ @albertorauljose đ
Muito obrigado por sua incrĂvel explicação, foi de grande utilidade e esclareceu minha dĂșvida. Agradeço por ter tirado um tempo para me ajudar com isso. Com certeza vou aplicar e atualizar meu projeto com essa dica. đ Um forte abraço e bons estudos!
Paulo Xavier.
