1

Soy principiante en desarrollo de páginas Web. Estoy intentado realizar un menú "hamburguesa" responsive desplegable utilizando un <input type="checkbox /> con id:"check". Lo que pasa es que al poner la resolución ya en pantallas en cierto porcentaje la "hamburguesa" no reacciona. Ya intenté de muchas formas y no me funciona.

Esto es lo que hice antes de ver una pregunta con el mismo problema:

#check:checked ~ .menu{
    right: 0;
  }
<header>
    <h2 class="logo">Corpotarive</h2>
    <input type=" checkbox" id="check">
    <label for="check" class="mostrar-menu">
      &#8801
    </label>
    <nav class="menu">
      <a href="#">Inicio</a>
      <a href="#">Sobre Nosotros</a>
      <a href="#">Blog</a>
      <label for="check" class="esconder-menu">
        &#215
      </label>
    </nav>
  </header>

Luego de ver la posible solución en una situación similar puse lo siguiente:

#check:checked + .navegacion .menu{
    right: 0;
  }
<header>
    <h2 class="logo">Corpotarive</h2>
    <label for="check" class="mostrar-menu">
      &#8801
    </label>
    <input type=" checkbox" id="check">
    <nav class="menu">
      <a href="#">Inicio</a>
      <a href="#">Sobre Nosotros</a>
      <a href="#">Blog</a>
      <label for="check" class="esconder-menu">
        &#215
      </label>
    </nav>
  </header>

1
  • Si gustas te puedo ayudar a resolver este problema pero utilizando Javascript
    – Roy
    el 9 jun. 2021 a las 18:51

1 respuesta 1

2

El problema es que ~ se usa para acceder al hermano inmediato, es decir, el siguiente elemento en el mismo nivel. Referencia.

En el primer código, el selector #check:checked ~ .menu es correcto, pero no el HTML, porque el siguiente elemento es <label> y no el menú. Solo hay que poner la etiqueta antes del checkbox y debajo el menú.

Nunca he usado el + selector de hermanos adyacentes, pero supongo que funciona de forma similar al anterior.

Combinando ambos códigos y, agregando un poco de CSS adicional, este fragmento de código funciona como esperas con ~

.mostrar-menu {
    /* Mostrar "hamburguesa" más grande y con diferente cursor */
    font-size: 2em;
    cursor: pointer;
}
.menu {
    /* Evitar barra de desplazamiento en documento */
    display: none;
    position: absolute;
    right: -100%;
}
#check {
    /* El checkbox debe estar oculto */
    display: none;
}
#check:checked ~ .menu {
    display: block;
    right: 0;
}
<header>
    <h2 class="logo">Corpotarive</h2>
    <label for="check" class="mostrar-menu" title="Menú">
      &#8801
    </label>
    <input type="checkbox" id="check">
    <nav class="menu">
      <a href="#">Inicio</a>
      <a href="#">Sobre Nosotros</a>
      <a href="#">Blog</a>
      <label for="check" class="esconder-menu">
        &#215
      </label>
    </nav>
  </header>

1
  • Gracias, muy acertado, gracias por la explicación y por la solución, me funcionó!
    – Chera Vsqz
    el 10 jun. 2021 a las 15:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.