| en Tutoriales Wordpress
Crear un menu desplegable en WordPress.
En esta guia para WordPress vamos a aprender a crear un menu desplegable de varios niveles, conoceremos cuales son las clases css que el C.M.S tiene para que podamos manipular y dar forma a nuestro menu. En la guia nos iremos respondiendo las siguientes preguntas ¿Como crear un menu personalizado para WordPress?, ¿Que archivos de WordPress debemos manipular para crear un menu? ¿Que debemos considerar para que el menu de nuestro sitio web sea accecible?
Escribir estilos css para un menú de navegación en WordPress es un trabajo de rutina para un maquetador, después de todo css ha avanzado mucho en los últimos tiempos, incluso podemos imitar el comportamiento “hover” sin utilizar nada de JavaScript
Las funciones que WordPress nos provee son suficientemente potentes y versátiles como para proporcionarnos exactamente el HTML que necesitamos, además de algunas opciones más para proporcionar una mejor experiencia de usuario a nuestros cliente.El objetivo de esta publicación es guiarte y proporcionarte una solución completa sobre cómo diseñar un menú de navegación nativo de WordPress.
¿Como agregar un menú de WordPress a nuestro sitio web?
La programación para mostrar un menú en nuestro sitio WordPress generalmente es muy simple, bastara con unas pocas líneas. En nuestro archivo functions.php deberíamos agregar el siguiente código.
register_nav_menus( array(
'main' => __( 'Main Menu', 'mytheme' ),
) );
En header.php
<header class="header"> <nav class="nav">
<?php
if ( has_nav_menu( 'main' ) ) {
wp_nav_menu( array(
'theme_location' => 'main-menu',
'container' => '',
'menu_class' => 'navigation-main',
) );
}
?>
</nav> </header>
Luego todo lo que tenemos que hacer es seguir el proceso habitual de crear un menú y agregar algunos elementos a través del panel de administración.
Para esta pequeña guía vamos a suponer que la estructura de nuestro menú es la siguiente:
├── Home
├── Blog
| ├── News
| ├── Sports
| ├── Fashion
| | ├── Article #1 Title
| | ├── Article #1 Title
| ├── Business
├── About
└── Contact
Así que, básicamente, construiremos un menú de tres niveles (nuestros estilos finales admitirán niveles anidados infinitos). Esto produciría aproximadamente el siguiente marcado o estructura html:
<header class="header">
<nav class="nav">
<ul class="navigation-main">
<li class="current-menu-item">
<a href="#">Home</a>
</li>
<li class="menu-item-has-children">
<a href="#">Blog</a>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Sports</a></li>
<li class="menu-item-has-children">
<a href="#">Fashion</a>
<ul>
<li><a href="#">Article #1</a></li>
<li><a href="#">Article #2</a></li>
</ul>
</li>
<li><a href="#">Business</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
Las clases css que WordPress agrega a nuestro menu
En realidad WordPress agregara clases css especificas de acuerdo a la página que estemos viendo en nuestro navegador, por ejemplo si estamos en el blog WordPress agregara la clase css ‘blog’ y si además el “blog” es la pagina principal agregara la clase css “home”.
Debemos tener en cuenta que WordPress agrega las siguientes tres clases importantes a los elementos «li» del menú con las siguientes reglas:
Pronto veremos cómo usar estas clases en nuestras hojas de estilo.
WordPress también agrega algunas otras clases css que generalmente no nos conciernen en un menú normal, pero que pueden ser útiles en casos de uso muy específicos, así que asegúrese de revisarlos si desea construir un menú especial para su sitio web.
Aplicando estilos a la estructura html del menu.
Ahora que ya tenemos la estructura html lista, es hora de comenzar a darle los estilos a nuestro menú para que sea vea como nos interesa. Usaremos Sass en lugar del CSS tradicional. Sass es muy útil aquí, especialmente en el diseño de menús donde hay una gran cantidad de anidamiento involucrado. Es muy útil porque (como ocurre con la mayoría de las cosas en WordPress) necesitamos poner todo en nuestro menú en su espacio de nombres de clase principal (.navigation-main). Esto evitará que nuestros estilos «perjudiquen» a otros menús potenciales que podamos tener en nuestro tema.
En general, cuando escribimos estilos para un componente de navegación con una funcionalidad compleja, deberíamos dividir estilos en estilos de «estructura / funcionalidad» y «presentación / apariencia» de bloques, incluso si eso significa que tenemos que ser un poco más detallado o incluso duplicar algunos selectores.
Podremos descubrir que esto ofrece una clara separación de preocupaciones y se convierte en un paradigma mucho más sostenible, especialmente cuando los requisitos de presentación del componente se vuelven muy complejos (pensemos en animaciones, colores diferentes para cada subtema, etc.). No vamos a tratar este tipo de cosas en este momento, pero es una buena práctica tener en cuenta cuando las preocupaciones de CSS están tan claramente separadas en un componente aislado en particular como este.
Agregando estilos al archivo style.css de nuestro theme
.header {
display: flex;
align-items: center;
}
.nav {
width: 100%;
}
.navigation-main {
//
// Estilos estructurales
//
margin: 0;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: -999em; // "Ocultar" los submenús
}
li {
display: inline-block;
position: relative;
text-align: left; // Resetar la alineaciión
// Los primeros submenús aparecen debajo
// del elemento del menú (menú-item)
&:hover {
> ul {
left: auto;
}
}
// Todos los demás niveles aparecen a la derecha
li {
display: block;
&:hover {
> ul {
left: 100%;
top: 0;
}
}
}
}
// Los eEstilos de presentación serán agregados pronto.
}
En este momento tenemos un conjunto de enlaces alineados horizontalmente, podemos visualizar el código y su resultado en el siguiente enlace
See the Pen Styling a WordPress menú – Structural styles by Vassilis Mastorostergios (@vmasto_1470672674) on CodePen.
Vemos que si intentamos pasar el mouse sobre “Blog” o «fashion» el resultado no es muy elegante.
Mejorando la apariencia y los detalles visuales de nuestro menú .
Es una decoración básica, algunos colores para el fondo y los enlaces. Recuerda nuestro código estará escrito en SASS.
$background-color: #145474 !default;
$link-color: #fff !default;
$link-active-color: #ffcc03 !default;
.header {
background-color: $background-color;
display: flex;
align-items: center;
}
.nav {
width: 100%;
}
.navigation-main {
//
// Estilos de estructura
// Lo mismo que habiamos escrito antes
// Estilos de presentación
// Un poco de estilo a los enlaces globales del menu
a {
color: $link-color;
text-decoration: none;
display: block;
white-space: nowrap;
padding: 10px 15px;
}
// Estilos para el menu active y el efecto hover
a:hover {
color: $link-active-color;
}
// Estilos de submenu
ul {
background-color: $background-color;
}
}
Ahora nuestro menú ya se ve un poco más lindo.
See the Pen Styling a WordPress menú – Basic Presentation by Vassilis Mastorostergios (@vmasto_1470672674) on CodePen.
Aunque nuestro menú está empezando a verse bien, le faltan algunas cosas que son bastante importantes para una buena experiencia de usuario.
En primer lugar, sería bueno que, mientras el usuario pase el ratón sobre diferentes elementos de navegación, sus padres y antepasados permanezcan resaltados.
Esto ayuda a nuestros usuario a identificar la ruta que siguieron en nuestro sitio web y se ve mejor, así que vamos a solucionarlo con el siguiente selector extra:
// Active & hover styles
a:hover,
li:hover > a {
// Este truco mantiene todos los enlaces de la ruta de navegación coloreados con el color del enlace activo
color: $link-active-color;
}
En segundo lugar, debemos destacar los elementos de navegación que corresponden
a la página actualmente vista.
Eso significa que, si un usuario está en «Inicio», debemos resaltar el ítem «Inicio», y si un usuario está viendo «Artículo n. ° 1», el menú debe resaltar todos sus antecesores hasta e incluyendo «Blog»
Aquí es donde entran en juego las clases que mencionamos anteriormente, y es muy sencillo manejar los escenarios anteriores:
// Active & hover styles
a:hover,
li:hover > a,
.current-menu-item > a,
.current-menu-ancestor > a {
color: $link-active-color;
}
// Destacando elementos de menú actuales y sus antepasados
Podemos ver cómo «Home» ahora permanece activo y cómo si navega todo el camino hasta el «Artículo n. ° 1» sus antepasados también permanecerán destacados
See the Pen Styling a WordPress menú – Ancestors and current items by Vassilis Mastorostergios (@vmasto_1470672674) on CodePen.
Agregar iconos o pistas visuales a elementos desplegables
También es una buena práctica estándar proporcionar una pista visual (como una flecha) para elementos con submenús anidados. La parte difícil aquí es que los elementos que pertenecen al primer nivel (menú principal) deben tener flechas apuntando hacia abajo, mientras que el resto debe apuntar hacia la derecha. Como último paso, veamos cómo vamos a hacer esto:
// Primer nivel, elementos con flechas
.menu-item-has-children {
> a {
&::before {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
border: 4px solid transparent;
border-top-color: currentColor;
// Truco ingenioso para mantener siempre la flecha coloreada igual que
// el texto del elemento del menú en cada estado diferente
}
}
}
// Segundo nivel, fleche de los elementos
ul {
.menu-item-has-children {
> a {
&::before {
right: 2px;
border-top-color: transparent;
border-left-color: currentColor;
}
}
}
}
// Agregar flechas a elementos desplegables
Tenga en cuenta que estoy creando triángulos de CSS con el truco de los bordes, es decir usando bordes trasparentes cuando lo necesito, pero puede usar lo que desee, por ejemplo. Iconos de FontAwesome (fa-angle-down es una buena opción).
See the Pen Styling a WordPress menu – Dropdown arrows by Vassilis Mastorostergios (@vmasto_1470672674) on CodePen.
El resultado es muy bueno. Parece que ya hemos terminado con nuestro menú, perfectamente diseñado y listo para el despliegue.
Menu completamente accesible.
Nuestro menú está casi terminado, pero sería increíble si pudiéramos hacerlo accesible para los usuarios del teclado, navegando con el botón de tabulación. Para esto necesitaremos escribir un JavaScript muy básico y solo agregar un par de clases a nuestro CSS:
jQuery(function ($) {
var siteNavigation = $('.navigation-main');
siteNavigation.find( 'a' ).on( 'focus blur', function() {
$( this ).parents( 'li' ).toggleClass( 'focus' );
});
});
Esto alterna una clase en un elemento de menú cada vez que hacemos foco (comportamiento hover) en su enlace. De esta manera, simplemente podemos modificar nuestro CSS para mostrar los submenús cuando esa clase está presente:
li {
display: inline-block;
position: relative;
text-align: left; // Reseteamos la alineación del texto
&.focus, // Mostrar los menu con los comportmientos focus y hover
&:hover {
> ul {
left: auto;
}
}
li {
display: block;
&.focus,
&:hover {
> ul {
left: 100%;
top: 0;
}
}
}
}
a:hover,
li:hover > a,
.focus > a, // coloreando
.current-menu-item > a,
.current-menu-ancestor > a {
color: $link-active-color;
}
Finalmente ya estamos listos, tenemos un ejemplo completo con más niveles anidados y el elemento del menú actual en un nivel más bajo que el menú principal. Intente pasar el ratón sobre el tabulador y ¡todo debería funcionar bien!
See the Pen Styling a WordPress menú – Final result by Vassilis Mastorostergios (@vmasto_1470672674) on CodePen.
El autor original de esta guía ha sido Vassilis Mastorostergios
https://www.cssigniter.com/style-wordpress-navigation-menu-bar-using-css