Meu menu lateral inicia aberto ao entrar no site:
HTML
<nav class="menu-lateral menu-lateral--ativo">
<img src="assets/img/logo.svg" alt="" class="menu-lateral__logo" >
<a href="" class="menu-lateral__link menu-lateral__link--inicio menu-lateral__link--ativo">Inicio</a>
<a href="" class="menu-lateral__link menu-lateral__link--videos">Videos</a>
<a href="" class="menu-lateral__link menu-lateral__link--picos">Picos</a>
<a href="" class="menu-lateral__link menu-lateral__link--integrantes">Integrantes</a>
<a href="" class="menu-lateral__link menu-lateral__link--camisas">Camisas</a>
<a href="" class="menu-lateral__link menu-lateral__link--pinturas">Pinturas</a>
</nav>
CSS
.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;
}
.menu-lateral__logo {
width: 118px;
align-self: center;
padding: 16px;
}
.menu-lateral__link {
height: 64px;
color: #95999C;
padding-left: 64px;
display: flex;
align-items: center;
}
.menu-lateral__link::before {
width: 24px;
height: 24px;
font-size: 24px;
position: absolute;
left: 24px;
}
.menu-lateral__link--inicio::before {
content: "\e902";
}
.menu-lateral__link--videos::before {
content:"\e90e";
}
.menu-lateral__link--picos::before{
content:"\e908";
}
.menu-lateral__link--integrantes::before {
content: "\e903";
}
.menu-lateral__link--camisas::before {
content: "\e900";
}
.menu-lateral__link--pinturas::before {
content: "\e90a";
}
.menu-lateral__link--ativo{
color: #FFFFFF;
padding-left: 56px;
border-left: 8px solid #FFFFFF;
}