0

Fiz um btn:checked que deveria expandir o container .side-bar, mas ele não expande!

Já tentei colocar ele antes da side-bar no html, ele antes dela no css, eles 2 ao mesmo tempo antes dela e ainda assim não funciona.

HTML:

<div class="side-bar">
        <div class="menu">
          <input class="menu-btn" type="checkbox" id="menu-btn">
          <label class="menu-icon" for="menu-btn"><img src="img/menu.png" class="menu-icon"></label>
        </div>
      

        <div class="social-links">
          <ul>
            <li><a href="#"><img src="img/fb.png"></a></li>
            <li><a href="#"><img src="img/ig.png"></a></li>
            <li><a href="#"><img src="img/tw.png"></a></li>
          </ul>
        </div>

CSS:

.side-bar {
  width: 50px;
  height: 100vh;
  position: absolute;
  background: linear-gradient(#00545d, #000729);
  right: 0;
  top: 0;
  transition: 1s ease-out;
}

.menu-icon {
  display: block;
  width: 25px;
  margin: 40px auto;
  cursor: pointer;
}

.menu .menu-btn:checked ~ .side-bar {
  width: 100px;
  height: 100vh;
} 

Nesse código postado é como eu gostaria que ficasse primeiramente, porém não funcionou, obviamente.

1 Resposta 1

1

tudo bem? então nesse caso você terá que recorrer ao javascript, se for o que estou pensando, atualmente 11/02/2021 não há seletores CSS que seja possível selecionar um elemento pai(posso estar errado, então não é uma afirmação). Enfim vamos ao código:

Para o javascript apenas implementei um evento de click no elemento com id "menu-btn"(checkbox) e com uma estrutura condicional será verificado se o mesmo está checked ou unchecked, caso esteja checked será adicionado uma classe para o elemento com a classe "side-bar", que eu chamei de "expand-side-bar", no unchecked o mesmo irá remover a classe.

No CSS apenas modifiquei a seleção que você implementou ".menu .menu-btn:checked ~ .side-bar" e criei a classe "expand-side-bar"

Comente caso esteja com dúvidas sobre o código ou se essa é a solução que esperava, abração e bons estudos!

Obs: comentei alguns trechos do HTML, pois eu não possuo as imagens da sua codificação.

document.getElementById("menu-btn").onclick = function() {
  if (this.checked) {
    document.querySelector(".side-bar").classList.add("expand-side-bar")
  } else {
    document.querySelector(".side-bar").classList.remove("expand-side-bar")
  }
}
.side-bar {
  width: 50px;
  height: 100vh;
  position: absolute;
  background: linear-gradient(#00545d, #000729);
  right: 0;
  top: 0;
  transition: 1s ease-out;
}

.menu-icon {
  display: block;
  width: 25px;
  margin: 40px auto;
  cursor: pointer;
}

.expand-side-bar {
  width: 100px;
  height: 100vh;
}
<div class="side-bar">
  <div class="menu">
    <input class="menu-btn" type="checkbox" id="menu-btn">
    <label class="menu-icon" for="menu-btn"><!--<img src="img/menu.png" class="menu-icon">--></label>
  </div>


  <div class="social-links">
    <ul>
      <!-- <li><a href="#"><img src="img/fb.png"></a></li>
                <li><a href="#"><img src="img/ig.png"></a></li>
                <li><a href="#"><img src="img/tw.png"></a></li> -->
    </ul>
  </div>

</div>

2
  • incrível mano!!! funcionou perfeitamente, mto obrigado pela ajuda! Commented 11/02/2021 às 23:38
  • Disponha @CauãMattos que bom que conseguiu resolver e fico feliz em ajudar. Commented 12/02/2021 às 19:30

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 .