0

A lógica é fazer o menu aparecer quando estiver como checkbox selecionado e estiver em uma tela de largura máxima 800px porém por algum motivo não funciona...

.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>

1
  • Um poquinho de javascript resolve. Commented 7/07/2017 às 9:31

1 Resposta 1

2

O checkbox tem que ficar antes dos elementos que vão sofrer alteração quando ele for selecionado.

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 -->

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 .