Entrar Ainda não tem acesso?
1
resposta

MENU LATERAL ATIVO NAO FUNCIONA

Referente ao curso CSS: dispondo elementos com Flexbox e Grid

por THIAGO BERNARDES DA SILVA
| 54k xp | 17 posts

MEU MENU LATERAL NÃO ESTA FICANDO ATIVO, POXA VIDA O PROFESSOR NÃO EXPLICA NADA SE FOSSE SO PARA COPIAR CODIGOS NEM PRECISAVA DELE `

Início vídeos Picos Integrantes Camisas Pinturas ` 
@font-face {
    font-family: 'icones';
    src: url(../font/icones.ttf); 
}
body{
background-color: #1D232A;
font-family: 'Open Sans', 'icones', sans-serif;
color: #FFFFFF;
}
.cabecalho{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #15191C;
    padding: 8px 16px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
}
.cabecalho_menu i::before{
    content: '\e904';
    font-size: 24px;
}

.cabecalho_notificacao i::before{
    content: '\e906';
    font-size: 24px;
}
.cabecalho_logo{
    width: 40px;
}
.menuLateral{

    display: flex;
    flex-direction: column;
    align-self: center;
    background-color: #15191C;
    width: 75vw;
    height: 100vh;
}
.menuLateral_logo{
    width:    118px;
    align-self: center;
    padding: 16px;
}    
.menuLateral_link{
    height: 64px;
    color: #95999C;
    padding-left: 64px;
    display: flex;
    align-items: center;
}

.menuLateral_link--ativo{
    color: #FFFFFF;
    padding-left: 56px;
    border-left: 8px solid #FFFFFF;
}

.menuLateral_link::before{
    content: "";
    width:    24px;
    height: 24px;
    font-size: 24px;
    position: absolute;
    left: 24px;

}        
.menuLateral-link--início::before{
    content:"\e902";
}
.menuLateral-link--vídeos::before{
    content:"\e90e";
}
.menuLateral-link--picos::before{
    content:"\e909";
}
.menuLateral-link--integrantes::before{
    content:"\e903";
}
.menuLateral-link--camisas::before{
    content:"\e900";
}

.menuLateral-link--pinturas::before{
    content:"\e90a";
}
1 resposta
por Juliana De Couto Lucca
| 137.2k xp | 41 posts

Oi Thiago.

Sem ver o HTML e o JS fica difícil de dizer com exatidão o que está acontecendo.

Mas olhando o CSS que você compartilhou está faltando algumas propriedades na classe menu-lateral.

Para que o menu fique escondido o professor usou o position: absolute com left: -100vw.

Também falta a classe que exibe o menu de volta, que é a menu-lateral--ativo. Nela o professor atribuiu a posição inicial do menu com um left: 0. 

.menu-lateral {
    display: flex;
    flex-direction: column;
    background-color: #15191C;
    width: 75vw;
    height: 100vh;

    position: absolute;
    left: -100vw;
    transition: .25s;
}

.menu-lateral--ativo {
    left: 0;
    transition: .25s;
}
Confirma se no seu projeto você adicionou essas classes e se estilizou tudo certinho. E claro, confirma se o arquivo index.js está certinho também e se linkou tudo no index.html.

Se ainda não rolar compartilha o restante do código que vamos nos ajudando por aqui.