Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

DUVIDA DESIGN WEB

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

por Victor Nunes Saboia
| 136.6k xp | 73 posts
Javascript: 
document.querySelector('.menu-abrir').onclick= function(){
    document.documentElement.classList.add('menu-ativo');
};

document.querySelector('.menu-fechar').onclick=function(){
    document.documentElement.classList.remove('menu-ativo');
};

CSS3:
@media (max-width: 600px){
    .barra-nav{
        background: #f0f0f0;
        padding: 1em;
        margin: 0;

        height: 100%;
        width: 90%;
        max-width: 320px;
        position: fixed;
        z-index: 1;
        top:0;
        left: -90%;
        transition: left 0.3s ease-out;
    }

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

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

    .menu-ativo:after{
        content: "";
        display: block;
        position: fixed;
        top:0;
        left:0;
        bottom: 0;
        right:0;
        background: rgba(0,0,0,0.4);

    }
}

O que esse menu-ativo representa? eu vi que foi utilizado no Javascript,mas não entendi a conexão dele com as funcoes CSS acima,pois ele só foi utilizados no codigo do javascript e não foi usado no html

1 resposta
solução!
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa tarde, Victor! Como vai?

Essa classe menu-ativo representa o estado ativo do menu! No caso ela não aparece no HTML pq ela só é ativada ou desativada através do click no botão que contenha a classe menu-abrir ou menu-fechar, o que é controlado pelo JavaScript. Por isso que existem as duas funções que vc colocou no seu post!

document.querySelector('.menu-abrir').onclick= function(){

    // adiciona a classe menu-ativo no click do botão que tem a classe menu-abrir
    document.documentElement.classList.add('menu-ativo');
};

document.querySelector('.menu-fechar').onclick=function(){

    // remove a classe menu-ativo no click do botão que tem a classe menu-fechar
    document.documentElement.classList.remove('menu-ativo');
};

Pegou a ideia?

Qualquer coisa é só falar!

Grande abraço e bons estudos!