Quando eu estava fazendo assim:
* {
margin: 0;
padding: 0;
}
.fa-file-excel {
color: green;
background-color: #f9f9f9;
}
body {
background-color: #f9f9f9;
}
header {
height: 50px;
width: 100%;
position: absolute;
background-color: #296FA7;
}
#check {
display: none;
}
#icone {
cursor: pointer;
padding: 15px;
position: absolute;
z-index: 1;
transition: all .2s linear;
}
.barra {
/* top: 50px; */
/* background-color:rgb(255, 255, 255); */
background-color:#333;
height: 100%;
width: 300px;
position: absolute;
transition: all .2s linear;
left: -300px;
}
.nav-side-menu {
width: 100%;
position: absolute;
/* top:50px; */
}
.nav-side-menu a {
text-decoration: none;
}
.link {
background-color: #494950;
padding: 8px 16px 8px 16px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
transition: all 0.2s linear;
color: #fafaf9;
border-bottom: 2px solid #222;
opacity: 0;
margin-top: 200px;
}
.link:hover {
background-color: #050542;
}
.icon-menu {
display: inline-block;
}
#check:checked ~ #icone {
transform: translateX(300px);
}
#check:checked ~ .barra {
transform: translateX(300px);
}
#check:checked ~ .barra .nav-side-menu a .link{
opacity: 1;
margin-top: 0;
transition-delay: .2s;
}
<input type="checkbox" id="check">
<label for="check" id="icone" ><img src="img/icone.png"></label>
<div class="barra">
<div class="nav-side-menu">
<a href=""><div class="link">
<div class="icon-menu"><i class="fas fa-file-excel"></i></div>
Home
</div>
</a>
<a href=""><div class="link">R</div></a>
<a href=""><div class="link">S</div></a>
<a href=""><div class="link">L</div></a>
<a href=""><div class="link">C</div></a>
</div>
Deu tudo certo, aí quando comecei a separar e mudar a estrutura, não estou conseguindo fazer o mesmo efeito, pois o meu button:active ~ div .barra não acessa a barra, onde estou errando?
* {
margin: 0;
padding: 0;
}
.fa-file-excel {
color: green;
background-color: #f9f9f9;
}
body {
background-color: #f9f9f9;
}
header {
height: 50px;
width: 100%;
position: absolute;
background-color: #f9f952;
}
.icon-hamburguer {
width: 35px;
height: 4px;
background-color: #f9f9f9;
margin: 6px 0;
transition: all .2s linear;
}
#check {
display: none;
}
button {
cursor: pointer;
position: absolute;
z-index: 1;
transition: all .2s linear;
}
#icone {
cursor: pointer;
padding: 15px;
position: absolute;
z-index: 1;
transition: all .2s linear;
}
.barra {
/* top: 50px; */
/* background-color:rgb(255, 255, 255); */
background-color:#333;
height: 100%;
width: 300px;
position: absolute;
transition: all .2s linear;
left: -300px;
}
.nav-side-menu {
width: 100%;
position: absolute;
/* top:50px; */
}
.nav-side-menu a {
text-decoration: none;
}
.link {
background-color: #494950;
padding: 8px 16px 8px 16px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
transition: all 0.2s linear;
color: #fafaf9;
border-bottom: 2px solid #222;
opacity: 0;
margin-top: 200px;
}
.link:hover {
background-color: #050542;
}
.icon-menu {
display: inline-block;
}
button:active ~ div .barra {
transform: translateX(300px);
}
button:active ~ div .barra .nav-side-menu a .link{
opacity: 1;
margin-top: 0;
transition-delay: .2s;
}
<header>
<nav class="navbar-icon">
<button class="navbar-toggler navbar-toggler-left" type="button" id="">
<div class="icon-hamburguer"></div>
<div class="icon-hamburguer"></div>
<div class="icon-hamburguer"></div>
</button>
</nav>
</header>
<div class="barra">
<div class="nav-side-menu">
<a href=""><div class="link">
<div class="icon-menu"><i class="fas fa-file-excel"></i></div>
Home
</div>
</a>
<a href=""><div class="link">Relatórios</div></a>
<a href=""><div class="link">S</div></a>
<a href=""><div class="link">L</div></a>
<a href=""><div class="link">C</div></a>
</div>