Entrar Ainda não tem acesso?
2
respostas

Dúvida no pseudoelemento para obscurecer a página e no clique fora do menu para fechá-lo

Referente ao curso Web Design Responsivo: Páginas que se adaptam do mobile ao desk, no capítulo Menu Responsivo e atividade Opcional

por Maurício Martins da Silva
| 341.6k xp | 80 posts

Para contextualizar: Nessa aula, quando o botão "abre menu" é clicado, é adicionada a classe "menu-ativo" na tag html e com isso aparece uma barra lateral com z-index: 1 e width 90%;

Nessa aula, foi pedido para adicionar isso no css:

    .menu-ativo:after {
        content: "";
        display: block;

        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;

        background: rgba(0,0,0,0.4);
    }

A lógica aqui é deixar toda a página preta com opacidade 40%, mas o menu lateral não fica preto por causa do z-index: 1, certo? Entendi a lógica corretamente?

Depois, o professor coloca um evento para quando for clicado fora do menu, o html perca a tag "menu-ativo". Esse é o código:

document.documentElement.onclick = function(event) {
    if (event.target === document.documentElement) {
        document.documentElement.classList.remove('menu-ativo');
    }
};

Não entendi porque ele evita a ativação do evento quando eu clico no menu lateral (que também faz parte da html), mas funciona sempre que eu clico na parte fora do menu, mesmo que o meu clique seja sobre um link, ou uma imagem.

2 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Maurício, tudo bem? Vamos lá:

A lógica aqui é deixar toda a página preta com opacidade 40%, mas o menu lateral não fica preto por causa do z-index: 1, certo? Entendi a lógica corretamente?

Sim, é extamente isso.

A lógica aqui é deixar toda a página preta com opacidade 40%, mas o menu lateral não fica preto por causa do z-index: 1, certo? Entendi a lógica corretamente?

Desculpa, mas não entendi essa dúvida, consegue explicar com mais detalhes?

Espero ter ajudado.

por Maurício Martins da Silva
| 341.6k xp | 80 posts

Outra dúvida quanto ao escurecimento da página: Se mexemos na propriedade background, porque tudo fica mais escuro, inclusive imagens? Seria alguma propriedade do ":after"?

Matheus, você repetiu a mesma pergunta que eu fiz, duas vezes. Acho que o que não ficou claro pra você foi essa parte:

"Não entendi porque ele evita a ativação do evento quando eu clico no menu lateral (que também faz parte da html), mas funciona sempre que eu clico na parte fora do menu, mesmo que o meu clique seja sobre um link, ou uma imagem."

Para tentar ficar mais claro, vou tentar fazer um desenho em texto. Imagina que a parte a esquerda é o menu lateral e a parte a direita é a parte visível do site que ficou obscurecida com o background: rgba(0,0,0,0.4) (img é uma imagem qualquer que sobrou na parte visível do site):

=================================
M                I            I
E                I            I
N                I            I
U                I            I
                I            I
L                I            I
A                I            I
T                I    img    I
E                I            I
R                I            I
A                I            I
L                I            I
================================

Foi criado um evento para que sempre que seja clicado fora do menu lateral, o menu feche. Esse evento foi um onclick no próprio html, porém para evitar a propagação do evento, o professor colocou esse if para garantir que só vale o click se for no próprio html (para não propagar pro menu lateral):

if (event.target === document.documentElement)

Realmente, se eu clicar em qualquer parte do menu lateral, o evento não é acionado. Porém se eu clicar em cima de uma imagem (que está na página principal e portanto fora do menu lateral), o click funciona. Teria algo a ver com o pseudoelemento criado com o ":after"?