Mega Menú: todo lo que necesitas saber
Categoría:
WordPress,
Plugins para WordPress
Fecha:
12/02/2019
La navegación es un aspecto extremadamente importante del diseño web porque sirve para ayudar al usuario a encontrar exactamente lo que está buscando. Las herramientas de navegación diseñadas de manera efectiva juegan un papel importante en la experiencia del usuario cuando visita tu sitio web.
En este artículo te voy a contar todo lo que necesitas saber sobre los mega menús: qué son, ventajas e inconvenientes y cómo instalarlos y configurarlos en WordPress, Prestashop y Joomla.
[elementor-template id="80835"]
Qué es un mega menú
Un mega menú es un tipo de menú desplegable que permite mostrar las secciones y categorías de tu web de una forma más ordenada y visual. Al mismo tiempo, es una excelente opción de diseño para mostrar un gran número de opciones o páginas de nivel inferior de un sólo vistazo. En un mega menú puedes incluir títulos, imágenes, productos, formularios y multitud de elementos agrupados en distintos bloques o secciones que te ayudarán a estructurar mejor el menú de tu web. Los mega menús resultan extremadamente útiles en sitios web muy grandes o en tiendas online donde un menú tradicional podría resultar difícil de usar para el usuario que la visita. Con los mega menús se acabaron los desplegables infinitos. Una imagen vale más que mil palabras: En este ejemplo de la página web de Raiola Networks puedes ver un mega menú a dos columnas que permite al visitante identificar rápidamente los tipos de planes de hosting ofrecidos. En este segundo ejemplo, puedes ver un mega menú muy visual donde nos muestran las diferentes subcategorías en tres columnas, seguidas de dos elementos con imagen que destacan los productos seleccionados. Como puedes ver, los mega menús te permiten enfatizar visualmente las relaciones entre los distintos elementos y mejorar la escaneabilidad de cara al usuario.Ventajas de usar un mega menú
Veamos ahora algunas de las ventajas de implementar un mega menú en tu sitio web:- Para sitios grandes con muchas características, los menús desplegables habituales suelen ocultar la mayoría de las opciones para el usuario. Sí, puede desplazarse, pero es una molestia y el desplazamiento oculta las opciones en la parte superior del menú. Los mega menús muestran todo de un vistazo.
- Los desplegables no admiten la agrupación. Los mega menús te permiten agrupar visualmente los elementos relacionados. Esto ayuda a los usuarios a entender sus opciones.
- Las imágenes pueden valer más que mil palabras, como muestra el ejemplo de Moleskine. Los mega menús facilitan el uso de imágenes e iconos cuando sea necesario. Y, aunque se limite al texto, dispone de una tipografía más rica. Esto permite, por ejemplo, diferenciar los tamaños o los colores de los elementos en función de su importancia.
Mega Menú para WordPress
La forma más sencilla de instalar un mega menú en WordPress es utilizar un plugin. Daré por sentado que ya tienes WordPress instalado en tu servidor. Si no es así, puedes consultar este tutorial paso a paso con vídeos. En este artículo usaremos el Max Mega Menu que, si bien es de pago, ofrece una versión gratuita bastante completa, personalizable y en español. Suficiente para crear un menú bonito y sobretodo funcional. Vamos al lío.Max Mega Menu: Instalación paso a paso
El primer paso, cómo no, va a ser descargar el plugin desde el repositorio oficial de WordPress. Para ello, lo más sencillo es ir a tu WordPress y pulsar en Plugins > Añadir nuevo. Utilizando el buscador, busca “max mega menu”, selecciona “Instalar Ahora” y justo después “Activar”. En el menú de administración de tu WordPress, abajo del todo, ya habrá aparecido un nuevo elemento llamado Mega Menú desde donde podrás gestionar el plugin: Antes de meternos en materia: activa el Mega Menú en WordPress para tener disponibles todas las opciones a la hora de configurarlo. Ve a Apariencia > Menús. Una vez aquí, sólo tienes que marcar el checkbox “Habilitar” y guardar. El resto de opciones son simplemente visuales. El evento te permite elegir cómo se activará el mega menú, si pasando por encima con el ratón o haciendo clic. El efecto permite seleccionar la animación que se usará para abrir el menú o desactivarlo completamente. Y el tema permite seleccionar un tema visual que hayas creado anteriormente y que enseguida veremos. Una vez habilitado y guardado, podrás ver que aparece una nueva opción en los elementos del menú para configurar individualmente algunas opciones del Max Mega Menú: Al hacer clic en el botón de cualquier elemento, podrás seleccionar algunas opciones básicas y elegir un icono para el elemento: No nos vamos a detener en esto porque las opciones disponibles son muy básicas y se entienden por sí solas. Con esto, ya tendrás tu Max Mega Menú funcionando en WordPress. Aunque seguramente no tendrá el aspecto ni funcionará como tú desearías. Te falta configurarlo. Veamos ahora la configuración del plugin y todas las opciones que este te ofrece. Haz clic en la opción “Mega Menú” del panel de administración de WordPress y llegarás a la siguiente pantalla. Nos centraremos primero en los “Ajustes Generales”: Veamos cada apartado punto por punto:- Comportamiento del evento al hacer clic: Si cuando has habilitado el Max Mega Menú desde Apariencia > Menús has seleccionado como evento clic, aquí puedes seleccionar el comportamiento que tendrá el menú cada vez que usuario haga clic.
- Comportamiento del menú móvil: Lo mismo para elegir el comportamiento general del menú en la versión móvil.
- Salida de CSS: Aquí podrás elegir cómo se escribirá el CSS de tu menú. En un archivo (lo más recomendado), en el header o que no escriba CSS.
- Menu Item Descriptions: Al crear un elemento en cualquier menú, te aparece un apartado llamado “Etiqueta de navegación”. Es un texto que se muestra al pasar el cursor por encima del elemento. Como podrás adivinar, desde aquí activas o desactivas esta funcionalidad para tu mega menú.
- Unbind Javascript Events: Esta opción te permite desactivar el Javascript nativo de tu plantilla para todos los eventos que afectan al menú. Así evitas conflictos entre el plugin y la plantilla.
- Prefix Menu Item Classes: Si activas esta opción, el plugin añadirá el prefijo “mega-” a las clases de los elementos del menú. La finalidad es diferenciar elementos comunes como <li> o <ul> para que, si vas a introducir código CSS propio, solo afecte a los elementos del menú y no a toda la web.
- Active Menú Instances: Hay plantillas de WordPress que muestran el mismo menú en varios sitios a la vez. Esta opción te permite elegir en cuál tendrán efecto las funcionalidades del Max Mega Menú: en todas o en una especifica.
- Caché: Permite borrar la caché del plugin para ver los cambios realizados sin necesidad de borrar la caché de tu navegador.
- Exportar tema: Permite exportar cualquier tema que hayas creado para usarlo en otra web. Puedes hacerlo en dos formatos, JSON (el que usa nativamente el plugin para importar y el que usarás la mayoría de veces) y PHP (por si quieres usar el tema del menú en una plantilla de WordPress que estés desarrollando).
- Importar tema: Funciona con JSON y solo tienes que copiar-pegar tu código.
- Datos del plugin: Permite borrar los datos guardados y dejar el plugin tal como venía por defecto.
Michael Flores
01/12/2020 a las 05:35Responder a Michael Flores
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *