Checkbox para crear un menú responsive sin JavaScript

Html+Css   |   2 Comentarios

Hoy vamos a contarte un pequeño truco que es muy útil si no tienes manejo con Javascript o si no quieres hacer uso de él. El tema de hoy es crear un menú responsive y amigable con Google sin usar Javascript, usando solo HTML y CSS.

¿Por qué usar este truco?

Este truco viene a raíz de un cambio anunciado por Google en el que nos muestran su nuevo algoritmo de búsqueda, que va a modificar las posiciones de los resultados de búsqueda que se realicen a través de un teléfono móvil según la buena adaptación en versión móvil que tengamos de nuestra web. 

Por esta razón es de vital importancia que adaptes correctamente tu web para dispositivos móviles. Uno de los elementos más importantes a la hora de adaptar nuestra web, es el menú, ya que es el elemento que tiene todos los enlaces al resto de nuestra página web y el primer elemento que se ve.

Normalmente este elemento está en la primera posición de nuestra web y cuando accedemos a nuestra página (o a cualquier otra) todos estamos acostumbrados a que el menú se convierta en ese recuadro de 3 líneas que todos asociamos a este elemento y que al pulsar sobre él, se despliegue el menú. Para este efecto se usa Javascript, pero para el truco de hoy vamos a enseñaros otra forma.

¿Cómo crear un menú responsive sin usar Javascript?

Para crear un menú responsive vamos a usar, como hemos dicho antes, solo HTML y CSS. Lo primero que necesitamos es montar la vista HTML, para eso usaremos el siguiente código. Este código iría en la cabecera o header de nuestra web:

<nav class="menuHTML">

   <label for="menu-toggle">

      <div class="botonMenu">

         <span></span>

         <span></span>

         <span></span>

      </div>

   </label>

   <input type="checkbox" id="menu-toggle" />

   <ul id="trickMenu">

      <li><a href="#"> Contacto </a></li>

      <li><a href="#"> Quiénes Somos </a></li>

      <li><a href="#"> Blog </a></li>

   </ul>

</nav>

Y después usaremos el CSS para darle el funcionamiento. El código CSS se añade en vuestro archivo de estilos, normalmente llamado style.css o styles.css.  El código sería el siguiente:

<style>

.botonMenu

{

   margin: 0 auto;

   display: block;

   width: 40px;

   height: 36px;

   padding: 10px;

   border-radius: 7px;

   background: #666;

   color: white;

   cursor: pointer;

   position: relative;

}

.botonMenu span

{

   display: block;

   width: 40px;

   height: 4px;

   background: white;

   margin-top: 7px;

}

label

{

   cursor: pointer;

}

#menu-toggle

{

   display: none;

}

#trickMenu

{

   display: none;

   text-align: center;

   background: white;

   padding: 10px 0;

}

#trickMenu li a

{

   display: block;

   padding: 10px 0;

   color: black;

}

#menu-toggle:checked + #trickMenu

{

   display: block;

}

</style>

Como podéis ver el input lo ocultamos y lo camuflamos para que haga el efecto toggle que se haría con Javascript pero usando el selector :checked de CSS. La manera en la que este truco funciona es simple, la etiqueta label está asociada al input mediante el for del label y el id del input, por lo que al hacer click en el label, estaríamos marcando el input abriendo y cerrando de esta forma el menú.

Conclusión

Como puedes ver de esta forma tan sencilla y sin necesidad de usar Javascript, puedes conseguir un menú amigable con la versión móvil y de esta forma conseguir que Google, gracias a su nuevo algoritmo, sitúe tu web en una posición mejor.

Otra ventaja de usar este truco es que al usar solo HTML y CSS se puede aplicar a cualquier CMS que usemos como WordPress, Magento, etc.

Cuéntanos qué te ha parecido el artículo y si te ha resultado útil. También puedes decirnos si conocías esta forma de crear un menú sin necesidad de Javascript o si has tenido algún problema a la hora de implementarlo en tu página web.

¿Te ha gustado el artículo?

(14 votos, promedio: 3,21 sobre 5)

Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes