Checked does not work

Asked

Viewed 441 times

0

The logic is to make the menu appear when it is as checkbox selected and is on a screen of maximum width 800px but for some reason does not work...

.classes {
  margin-top: 80px;
  width: 100%;
  height: 70px;
  background-color: #FFFFFF;
}

.classes ul {
  position: relative;
  list-style: none;
}

.classes ul li {
  width: 150px;
  height: 100px;
  float: left;
}

.classes button {
  display: block;
  padding: 15px;
  border: none;
  text-align: center;
  background: #303336;
  color: #FFFFFF;
}

.classes ul ul {
  position: absolute;
  visibility: hidden;
}

.classes ul li:hover ul {
  visibility: visible;
}

.classes button:hover {
  background: #F4F4F4;
  color: #555;
}

.classes ul ul li {
  float: none;
  border-bottom: solid 1px #ccc;
}

.classes ul ul li button {
  background: #069;
}

label[for="bt_menu"] {
  margin-top: -150px;
  padding: 5px;
  background-color: red;
  color: #fff;
  text-align: center;
  font-size: 30px;
  cursor: pointer;
  display: none;
  width: 50px;
  height: 45px;
}

#bt_menu {}

@media(max-width: 800px) {
  label[for="bt_menu"] {
    display: block;
  }
  #bt_menu:checked~.classes {
    margin-left: 10px;
  }
  .classes {
    margin-left: -100%;
    transition: all .4s;
  }
  .classes ul li {
    width: 100%;
    float: none;
  }
  .classes ul ul {
    position: static;
    overflow: hidden;
    max-height: 0;
    transition: all .4s;
  }
  .classes ul li:hover ul {
    height: auto;
    max-height: 700px;
  }
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <!-- nav e lista para os botões e menu dropdown dos itens -->
  <nav class="classes">
    <ul>
      <li>
        <!-- Sessão dos Móveis -->
        <button>Móveis</button>
        <ul>
          <li>
            <button class="sessoes" onclick="armarios()">Armarios</button>
          </li>
        </ul>
      </li>
      <li>
        <!-- Sessão das Roupas -->
        <button>Roupas</button>
        <ul>
          <li>
            <button class="sessoes" onclick="bones()">Bonés</button>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
  <!-- Input para menu responsivo -->
  <input type="checkbox" id="bt_menu">
  <label for="bt_menu">&#9776;</label>
</body>

</html>

html5 css3

  • A drop of javascript resolves.

1 answer

2

The checkbox has to stay before the elements that will undergo change when it is selected.

Jsfiddle

.classes {
  width: 100%;
  height: 70px;
  background-color: #FFFFFF;
}

.classes ul {
  position: relative;
  list-style: none;
}

.classes ul li {
  width: 150px;
  height: 100px;
  float: left;
}

.classes button {
  display: block;
  padding: 15px;
  border: none;
  text-align: center;
  background: #303336;
  color: #FFFFFF;
}

.classes ul ul {
  position: absolute;
  visibility: hidden;
}

.classes ul li:hover ul {
  visibility: visible;
}

.classes button:hover {
  background: #F4F4F4;
  color: #555;
}

.classes ul ul li {
  float: none;
  border-bottom: solid 1px #ccc;
}

.classes ul ul li button {
  background: #069;
}

label[for="bt_menu"] {
  padding: 5px;
  background-color: red;
  color: #fff;
  text-align: center;
  font-size: 30px;
  cursor: pointer;
  display: none;
  width: 50px;
  height: 45px;
}

#bt_menu {
  display: none;
}

@media(max-width: 800px) {
  label[for="bt_menu"] {
    display: block;
  }
  #bt_menu:checked~.classes {
    margin-left: 10px;
  }
  .classes {
    margin-left: -100%;
    transition: all .4s;
  }
  .classes ul li {
    float: left;
  }
  .classes ul ul {
    position: static;
    overflow: hidden;
    max-height: 0;
    transition: all .4s;
    padding-left: 0;
  }
  .classes ul li:hover ul {
    height: auto;
    max-height: 700px;
  }
}
<!-- nav e lista para os botões e menu dropdown dos itens -->
<input type="checkbox" id="bt_menu">
<label for="bt_menu">&#9776;</label>
<nav class="classes">
  <ul>
    <li>
      <!-- Sessão dos Móveis -->
      <button>Móveis</button>
      <ul>
        <li>
          <button class="sessoes" onclick="armarios()">Armarios</button>
        </li>
      </ul>
    </li>
    <li>
      <!-- Sessão das Roupas -->
      <button>Roupas</button>
      <ul>
        <li>
          <button class="sessoes" onclick="bones()">Bonés</button>
        </li>
      </ul>
    </li>
  </ul>
</nav>
<!-- Input para menu responsivo -->

Browser other questions tagged html5 css3

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