I cannot use :checked

Asked

Viewed 59 times

-2

css: .menu {
  display: block;
}


/* CSS quando o checkbox está marcado */

#bt-menu:checked~.menu {
  display: none;
}
<div class="menuu">
  <input type="checkbox" id="bt_menu">
  <label for="bt_menu"></label>
  <span></span>
</div>
<div>
  <nav class="menu">
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">Serviços</a>
        <ul>
          <li><a href="#">criação de sites</a></li>
          <li><a href="#">arte visual</a></li>
        </ul>
      </li>
      <li><a href="#">cursos</a>
        <ul>
          <li><a href="#">java</a></li>
          <li><a href="#">photoshop</a></li>
          <li><a href="#">criação de sites</a></li>
        </ul>
      </li>
      <li><a href="#">contatos</a></li>
    </ul>
  </nav>
</div>

in case I click to disappear and nothing happens, continues as if it were display:block

css css3 checkbox menu

  • Ursula, the dial dial CSS ~ is used to find siblings of an element. In a tree hierarchy being siblings means having the same knot as parent or must be on the same level. In your example #bt-menu is the son of <div class="menuu"> while .menu is another’s son <div>.

  • Important you [Dit] your question and explain objectively and punctually the difficulty found, accompanied by a [mcve] of the problem and attempt to solve. To better enjoy the site, understand and avoid closures and negativities worth reading the Stack Overflow Survival Guide in English.

1 answer

3

Reasons why it is not working:

  • your input has the ID "bt_menu" but in CSS is "Bt-menu";

  • To use the sibling binary ("~"), the input must be at a level that has access to the elements you want to control. And in case it is locked inside the div "menuu", then the selector does not work for anything outside of it;

  • it is also necessary to include * in the selector:

#bt_menu:checked ~ * .menu

Below is a functional example with some modifications:

  • I moved the checkbox to the highest level, so it has access to all the other elements;

  • I created a "hidden" class. Everything that uses it will be hidden. I thought it made more sense.

.menu {
  display: block;
}

#escondido:checked ~ * .escondivel {
  display: none;
}
<input type="checkbox" id="escondido">

<div class="menuu">
  <label for="escondido" id="btn-esconder">esconder</label>
</div>
<div>
  <nav class="menu escondivel">
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">Serviços</a>
        <ul>
          <li><a href="#">criação de sites</a></li>
          <li><a href="#">arte visual</a></li>
        </ul>
      </li>
      <li><a href="#">cursos</a>
        <ul>
          <li><a href="#">java</a></li>
          <li><a href="#">photoshop</a></li>
          <li><a href="#">criação de sites</a></li>
        </ul>
      </li>
      <li><a href="#">contatos</a></li>
    </ul>
  </nav>
</div>

Browser other questions tagged css css3 checkbox menu

You are not signed in. Login or sign up in order to post.