Pseudo-elemento esta sobre toda a janela | Web Design Responsivo: Páginas que se adaptam do mobile ao desk

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Ricardo da Conceição Silva

| 111.2k xp | 8 posts

Estou com problemas para finalizar a implementação do pseudo-elemento. Na atividade 07 da aula 05.Menu responsivo, é proposto a implementação do escurecimento de toda janela por detrás menu e quando clicar na área escura, volta-se a janela ao normal e feche o menu.

O menu está funcionando corretamente, porem o pseudo-elemento esta também sobre o menu. Ele fica sobre tudo mesmo e não tem como acessar o menu.


@media (max-width: 600px) {
    .menu-ativo:after {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0,0,0,0.4);
    }

    .barra-nav {
        background: #f0f0f0;
        padding: 1em;
        margin: 0;
        width: 90%;
        max-width: 320px;
        height: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: -90%;

        transition: left .3s ease-out;
    }

    .barra-nav.menu-ativo {
        left: 0;
    }

    .menu-principal li,
    .busca {
        padding: 1em 0;
        width: 100%;
    }
}

2 respostas

por Daniel Aparecido

| 48.5k xp | 21 posts

Programador JavaScript

01/05/2020

add um z-index menor em .menu-ativo:after e maior nos outros. o z-index funciona como se fosse camadas. as camadas que ficam por cima são as que vc define números maiores.

solução!

por Ricardo da Conceição Silva

| 111.2k xp | 8 posts

04/05/2020

Boa tarde Daniel Aparecido, já havia definido um z-index para ele porem o problema permanece, parece que o navegador não está respeitando direito o z-index. Ao inspecionar o html no Chrome, percebi que o "after" esta sendo gerado após o form dentro .barra-nav, no caso estava na frente de tudo.

Terminei solucionando de outro forma: Criei uma Div antes da Nav com as mesmas propriedades do "after", porem com o display: none para ficar oculto e quando o menu for acionado o display é alterado para Block.

.fundo {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.4);
}
...
@media (max-width: 600px) {
    .fundo.fundo-ativo {
        display: block;
    }
...

Bom, finalizei com o script JQuery e tudo certo.

$(".menu-abrir").click(menuMobile);
$(".menu-fechar").click(menuMobile);
$(".fundo").click(menuMobile);

function menuMobile () {
    $(".barra-nav").toggleClass("menu-ativo");
    $(".fundo").toggleClass("fundo-ativo")
}

Daniel! Obrigado pela força, um abraço e bons estudo e fica com Deus!!!