2

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>

1 Resposta 1

3

Tatah primeiramente, estou te dando uma dica. Não é puxão de orelha, é uma crítica construtiva ok. Vc precisa entender o que está fazendo antes de sair mudando as coisas. Digo isso pq vc precisa entender o conceito e como os elementos HTML se comportam para que o seu CSS funcione como vc espera.

Repare que no exemplo que vc postou que funciona o trigger pro menu abrir é feito com um input:checkbox que está escondido. quando vc clica na label que tem um for para esse checkbox ele fica como :checked e abre o menu lateral.

Quando vc removeu o input:checkbox e a label do HTML, depois trocou no css :checked por :active ai que vc "avacalhou" com a estrutura toda :D

Veja no exemplo, deixei os comments no código pra te ajudar. Agora está funcionando como vc espera.

OBS: Deixei o input:checkbox visível, para vc entender que quando ele está marcado o menu abre, e desmarcado ele fecha o menu.

* {
    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;
}

label {
    cursor: pointer;
    position: absolute;
    z-index: 1;
    transition: all .2s linear;

    /* estilos para deixar label visualmente igual o Button */
    border: 1px solid #999;
    background-image: linear-gradient(to bottom, #eee, #bbb);
    padding: 3px;
    border-radius: 3px;
}

#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;
}

/* input quando checado abre o menu */
#btn:checked ~ .barra {
    transform: translateX(300px);
}

#btn:checked ~ div .barra .nav-side-menu a .link{
    opacity: 1;
    margin-top: 0;
    transition-delay: .2s;
}
<!-- input que vc pode esconder com display:none, mas que vai ser acessado e marcado quando clica na label -->
<input type="checkbox" name="" id="btn">

<header>
    <nav class="navbar-icon"> 
        <!-- label com o for para o ID do checkbox que abre o menu -->
        <label for="btn" class="navbar-toggler navbar-toggler-left" type="button" id="">
            <div class="icon-hamburguer"></div>
            <div class="icon-hamburguer"></div>
            <div class="icon-hamburguer"></div>
        </label>
    </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>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .