Skip to main content
removeu 8 caracteres do conteúdo
Fonte Link

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 == true) {
    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>

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 == true) {
    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>

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>

Fonte Link

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 == true) {
    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>