Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
Si quieres que tu sitio sea responsivo, ¿y quién no?, es importante asegurarte de que tu menú de navegación principal funcione bien en pantallas pequeñas.
Los menús de navegación grandes pueden ocupar demasiado espacio en un teléfono móvil, o si no lo hacen, pueden ser demasiado pequeños para ser legibles o para permitir tocar el enlace correcto con fiabilidad.
Un menú de hamburguesa es un medio para evitar esto. Se trata de un menú que permanece oculto hasta que el usuario da un toque sobre él. La razón por la que se le denomina menú de hamburguesa es porque el símbolo que lo representa consiste en tres líneas horizontales una sobre la otra, algo que se asemeja ligeramente a una hamburguesa.
Existen plugins que convertirán tu menú de navegación principal de WordPress en un menú de hamburguesa (incluidos los disponibles en Code Canyon), pero ¿qué pasa si quieres crear uno en tu propio tema?
En este tutorial, aprenderás cómo hacerlo.
Lo que necesitarás
Para seguir con este tutorial, necesitarás lo siguiente:
- Una instalación de desarrollo de WordPress.
- Un editor de código.
- Un tema que puedes editar (si estás usando un tema de terceros, necesitarás crear un tema hijo).
El menú inicial
El código que escribiremos se aplicará al menú generado por WordPress utilizando su propio sistema de menú de navegación. No es necesario crear con código un menú nuevo o diferente para dispositivos móviles. (Una de las cosas que más me fastidia son los sitios que tienen una navegación diferente en su versión para ordenadores de escritorio y en su versión móvil, ya que normalmente esto va en detrimento de la experiencia de los usuarios en dispositivos móviles.)
Voy a demostrar esta técnica en relación al menú en mi propio sitio y añadiré el código al archivo header.php, así como a la hoja de estilos y también un nuevo archivo JavaScript.
Aquí tienes el menú para ordenadores de escritorio:
Es un menú horizontal situado bajo la imagen del banner y la cabecera y justo sobre el contenido.
En el móvil, la imagen del banner no es visible. Quiero eliminar el menú y reemplazarlo con un símbolo de hamburguesa. Cuando el usuario haga clic sobre este símbolo, aparecerá el menú.
Aquí está el código para el menú:
<nav class="menu main">
<div class="skip-link screen-reader-text">
<a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>">
<?php _e( 'Skip to content', 'tutsplus' ); ?>
</a>
</div>
<?php wp_nav_menu( array(
'container_class' => 'main-nav',
'theme_location' => 'primary'
) ); ?>
</nav><!-- .main -->
Todo está envuelto en un div con la clase .menu.main. Hay un enlace de salto para los lectores de pantalla y después la función wp_nav_menu() que incluye 'container_class' 'principal-nav', que añade una clase CSS adicional al propio menú. Podemos usar más adelante esas clases para aplicar estilo al menú para móviles.
Así que empecemos.
Añadir el símbolo de la hamburguesa
El primer paso consiste en crear el código para el símbolo de la hamburguesa en el archivo header.php y aplicarle estilo de forma que solo sea visible en dispositivos móviles.
En el archivo header.php, añade este código dentro del elemento header (no dentro de la navegación):
<a class="toggle-nav" href="#">☰</a>
En mi caso, esto significa que el código para la cabecera (header) y la navegación es como sigue (ten en cuenta que en el código de abajo he omitido el banner, aunque sí está en mi archivo):
<div class="header-bg">
<header role="banner">
<hgroup class="site-name three-quarters left">
<h1 id="site-title" class="one-half-left">
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<div class="right quarter">
<a class="toggle-nav" href="#">☰</a>
</div> <!-- .one-half right -->
</header><!-- header -->
</div><!-- header-bg-->
<!-- full width navigation menu - not on landing page -->
<nav class="menu main">
<div class="skip-link screen-reader-text">
<a href="#content" title="<?php esc_attr_e( 'Skip to content', 'compass' ); ?>">
<?php _e( 'Skip to content', 'twentyten' ); ?>
</a>
</div>
<?php wp_nav_menu( array(
'container_class' => 'main-nav',
'theme_location' => 'primary'
) ); ?>
</nav><!-- .main -->
Así que el símbolo de hamburguesa (que se muestra usando el código HTML ☰) está en la cabecera, y el menú de navegación está bajo él.
Ahora, vamos a añadir un poco de estilo para el elemento toggle-nav.
Aplicar estilo al símbolo de la hamburguesa
En primer lugar, tenemos que ocultar el símbolo de la hamburguesa para ordenadores de escritorio.
En tu hoja de estilo, añade esto para ocultar el símbolo de la hamburguesa:
.toggle-nav {
display: none !important;
}
Pero es necesario que te asegures de que se muestra en la versión móvil. Por lo tanto, añade una media query o "consulta de medios", utilizando el ancho máximo que estés utilizando para la media query general. Aquí está la mía:
@media screen and ( max-width: 580px ) {
.toggle-nav {
display: inline-block !important;
}
}
Eso hará que el icono de la hamburguesa sea visible en pantallas más pequeñas. He utilizado !important para asegurarme de que no se reemplaza por ningún otro estilo de enlace presente en mi tema.
Ahora vamos a añadirle un estilo extra. Edita la media query para que tenga este aspecto:
@media screen and ( max-width: 580px ) {
.toggle-nav {
display: inline-block !important;
float: right;
margin: 25px;
font-size: 2em;
transition: color linear 0.15s;
}
a.toggle-nav:link,
a.toggle-nav:visited,
a.toggle-nav:hover,
a.toggle-nav:active {
text-decoration: none;
color: #fff;
}
}
Esto añade un color y un tamaño al icono y también sustituye cualquier estilo existente para los enlaces, con independencia del estado en el que se encuentren.
Así es como se verá ahora el icono de la hamburguesa en el móvil:
Este es el icono de la hamburguesa con los estilo aplicados. Ahora para el menú de navegación.
Aplicar estilo al menú de navegación
El propio menú de navegación necesita ser diseñado para dispositivos móviles. Dentro de tu media query, añade este CSS:
.menu.main {
display: inline-block;
position: relative;
background: #fff;
text-align: left;
}
.menu.main ul {
display: none;
position: absolute;
overflow: auto;
top: 0px;
right: 0px;
z-index: 999;
padding-right: 15px;
background: #fff;
}
.menu.main ul li {
float: none;
display: block;
position: relative;
top: 0px;
right: 0px;
min-width: 200px;
background: #fff;
text-align: right;
}
.main.menu li:after {
content: none;
}
Estos son algunos aspectos clave de lo que hace ese código:
- Cambia los colores y la posición del menú principal y alinea el texto a la izquierda.
- Oculta la lista dentro del menú, de modo que cuando el usuario visite por primera vez el sitio desde el móvil, el menú no se muestre.
- Cambia la flotación y los colores de los elementos de lista dentro de la misma.
- Proporciona un posicionamiento relativo al menú y un posicionamiento absoluto a la lista, para que pueda ubicarse sobre el contenido de la página sin empujarlo hacia abajo.
- Elimina cualquier elemento que aparezca después de los elementos de lista que estén en la versión para escritorio de mi tema.
Ten en cuenta que los ajustes que tengas que hacer en tu menú pueden ser distintos y dependerán de los estilos que tenga aplicados en la versión de escritorio. Lo más importante es ocultar el menú y modificar el posicionamiento.
Añadir JavaScript
Para que todo funcione, necesitamos añadir un poco de JavaScript. Esto hará que el menú se deslice hacia abajo cuando el usuario toque en el icono de hamburguesa.
Añade un nuevo archivo llamado burger-menu.js a tu tema (me gusta poner el mío dentro de una carpeta para los scripts).
Añade este script en él:
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery('.menu.main ul').slideToggle(500);
e.preventDefault();
});
});
Este script deslizará el ul situado dentro del elemento .menu.main hacia abajo cuando el usuario haga clic sobre el elemento .toggle-nav (es decir, en el icono de hamburguesa). Guarda el archivo y ciérralo.
Pero no funcionará a menos que pongas en cola el script. Abre el archivo functions.php de tu tema y añade esto:
function tutsplus_burger_menu_scripts() {
wp_enqueue_script( 'burger-menu-script', get_stylesheet_directory_uri() . '/scripts/burger-menu.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'tutsplus_burger_menu_scripts' );
Esto pondrá en cola el script, y hará que funcione. Guarda y cierra el archivo de las funciones.
Ahora, si visitas tu sitio en el móvil (o en un navegador de escritorio con el modo responsivo habilitado) y haces clic sobre esa hamburguesa, el menú se deslizará hacia abajo.
Está asentado sobre la parte superior del contenido, pero no lo empuja hacia abajo, y aparece con una agradable acción deslizante impulsada por JavaScript. Justo lo que queríamos.
Un menú de hamburguesa mejorará la experiencia de usuario de las visitas móviles
Un menú de navegación abarrotado, pensado principalmente para la versión de escritorio ocupará demasiado espacio en una pantalla pequeña y no permitirá a la gente leer el contenido por el que llegaron a tu sitio.
Pero tampoco quieres evitar que los visitantes móviles puedan acceder a la misma navegación que los visitantes de escritorio.
Al añadir un menú de hamburguesa como este, puedes aprovechar lo mejor de ambos mundos: un diseño móvil limpio que da acceso a la misma navegación que la versión para escritorio.
Otros artículos sobre menús de WordPress
Para obtener más información sobre los menús de WordPress, echa un vistazo a algunas de nuestras otras publicaciones:
