homefinance blog
Los mega menús son un modelo de diseño común en grandes sitios de WordPress. Dichos sitios pueden tener una arquitectura de información compleja, con muchas secciones y subsecciones diferentes. Al agrupar enlaces similares, los mega menús hacen que el usuario encuentre rápidamente información relevante. Sobre Mega Meniuri, el experto en usabilidad de Jakob Nielsen dice: “[Mega Menus] son una excelente opción de diseño para organizar una gran cantidad de opciones o revelar las páginas del sitio de nivel inferior de una mirada”. En esta publicación, echaremos un vistazo a los ejemplos de sitios de WordPress que usan mega menús, por qué vale la pena explorar como una opción si ejecuta un sitio web y complementos grandes para ayudarlo a implementar mega menús.
Los sitios de WordPress que usan mega menús efectivamente mega menús se encuentran en una amplia variedad de sitios. Ropa de Joanie
Tienda de ropa Joanie todo mega menú
MEGA MENÚ ARTÍCULOS en el sitio web de Joi Clothing Enlace a las categorías de productos de WooCommerce. Stanford Daily
Mega Stanford Menú deportivo diario
El sitio de noticias de Stanford Daily utiliza un menú de mega para mostrar categorías en categorías, es decir, Sport> Sport of Otoño> Hockey en el campo. Poso
Mega menú pouust singular
Las imágenes características también se utilizan en el Pouust Mega-Menui, a lo largo del sitio para resaltar historias importantes.
Universidad Estatal de Georgia
Menú mega para graduados en la Universidad Estatal de Georgia
Los elementos del menú para graduados en el sitio web de la Universidad Estatal de Georgia son enlaces personalizados a otro campo. Jamie Oliver
Mega Menú recetas Jamie Oliver
¡La mayoría de los mega mega menús! El sitio web de Jamie Oliver incluye un menú separado para tabletas y hamburguesas móviles. Britishmega Menú de arranque Británico Conocimiento
¿Qué características pueden contener los menús de WordPress? Además de los enlaces de menú, pueden tener:
Los títulos de las secciones
Imágenes
imagen
Descripciones
Widgets, que pueden incluir fotos o videos
La mayoría de los mega menús se muestran al pasar con el mouse, la intención de pasar con el mouse o hacer clic desde las barras de menú horizontales. Algunos complementos también pueden hacer mega menús verticales.
Hover Intent es un complemento jQuery que intenta sentir el significado del usuario sobre el movimiento del mouse. Por lo tanto, una diapositiva rápida puede no abrir el menú, mientras que un movimiento lento deliberado en un elemento de menú lo hará. Los mega complementos de WordPress son una serie de complementos gratuitos y pagados que hacen bien el trabajo si está pensando en agregar un mega menú a su sitio de WordPress.
Menú Mega Max (gratis)
Las características incluyen:
Accesibilidad amigable: se acepta la navegación del teclado.
Animaciones para las transiciones del submenú.
Opciones para ocultar elementos del menú o deshabilitar enlaces.
Versión premium con varias funciones, incluidos los menús verticales y el acordeón.
¿Estás interesado en el menú Max Mega (gratis)?
Detalles
Menú Mega Plugin para WordPress – Menú Mega AP (gratis)
Las características incluyen:
Mega menús verticales.
Crea menús deslizándose y colocación.
Opción para ocultar los menús en el móvil.
Desvanecerse o deslizar las transiciones.
Versión premium disponible con múltiples características, por ejemplo, varios iconos y agregue sus propios iconos.
¿Le interesa el complemento del menú Mega para WordPress – Menú Mega AP (gratis)? Detalliidemo
Ubermenu ($ 19)
Las características incluyen:
Submeno con filetes.
Menús generados dinámicamente.
Menús amigables para dispositivos móviles y tabletas.
Animaciones de menú.
¿Estás interesado en Ubermenu ($ 19)?
Detalliidemo
Mega menú principal (US $ 14)
Las características incluyen:
Más de 1600 íconos.
Compatible con WPML.
Agregue otros elementos de menú (logotipo, búsqueda).
¿Estás interesado en el menú principal (US $ 14)?
Detalliidemo
WP Mega Menu Pro ($ 18)
Las características incluyen:
Menú mega con archivos.
14 pieles disponibles.
¿Estás interesado en WP Mega Menu Pro ($ 18)?
Detalliidemo
Menú de héroes ($ 19)
Las características incluyen:
WooCommerce activado.
Antecedentes de menús.
Menú pegajoso.
¿Estás interesado en el menú de héroes ($ 19)?
Detalliidemo
Menú NOO ($ 15)
Las características incluyen:
Menús transparentes.
Rescate/carga preestablecida.
¿Estás interesado en el menú NOO ($ 15)?
Detalliidemo
Cómo crear un mega menú con el menú Mega Max para echar un vistazo a cómo crear un mega menú. Para este ejemplo, creamos un sitio web basado en alimentos con diferentes recetas que utilizan el tema de la col rizada. El primer paso es crear su menú utilizando la apariencia de> menús, asegurándose de que se ajuste correctamente a los elementos del submenú. Los mega menús solo se pueden crear para elementos de menú de nivel superior, no para elementos submenú. Para acceder a las opciones de complemento para menús, coloque el cursor sobre un elemento de menú y seleccione Mega Menú. Para agregar imágenes, use una imagen de widget: una nueva característica en WordPress 4.8.
Un widget de imagen de menú de Mega Max
Y esto es lo que el sitio del sitio de prueba frontal: el menú Mega Max con imagen en el frente
Para agregar videos, use WordPress 4.8 Widget de video y agregue el video de una URL. Como alternativa, agregue el código de incorporación de video a un widget de texto. Así es como se ve:
Menú Mega Max con video
También puede agregar iconos de menú a través de la sección icono del complemento.
Los Pashicones predeterminados del menú Mega Max
Para agregar Font Awesome, Generals o Iconos personalizados, se necesita la versión Pro, que cuesta $ 23 por un solo sitio.
Puede elegir el número de columnas en las que se muestran los menús y puede crear aspectos con varias columnas, agrupando los elementos juntos.
Apariencia de columna max mega menú 2
Después de crear un aspecto de dos columnas, aquí están los resultados en el front-end:
Max Mega Menu 2 Columna para submenú de sopa
Utilicé el widget de publicaciones de complementos recientes con miniaturas para agregar las últimas publicaciones. Para que se alineen horizontalmente, utilicé un widget en una sola columna más algo CSS. ¡La única razón por la cual las imágenes no se alinean perfectamente es que tienen diferentes alturas! Aquí está el CSS que solía obtener este resultado:
Y otra mirada a la forma en que aparece mi mega menú en el front-end de mi sitio de prueba, esta vez con tres columnas:
Últimas publicaciones en un aspecto de tres columnas
Agregar o modificar los elementos en los mega-hombres los guarda automáticamente. Recuerde hacer clic y guardar el menú si agrega nuevos elementos a la estructura del menú. Usando el menú Max Mega para tableta y móvil en mi teléfono, tengo que tener dos menús de hamburguesas, uno de mi tema y el generado por el menú Max Mega. El menú temático estaba deshabilitado, por lo que sería mejor oculto con CSS. Debido a que no hay eventos de mouse, desplazamiento e intención que funcionen como eventos de clic, con un toque que abre el submenú. Los elementos de menú de nivel superior con mega menús (por ejemplo, platos principales) no se puede acceder en un teléfono a menos que el usuario toque y sostiene y elige abrir en la nueva pestaña. Una forma de resolver esto es usar otro complemento para un menú solo para dispositivos móviles. El menú Max Mega no mostró todo de manera óptima en el móvil. Cambié el número de columnas de dos a una, pero eso tuvo el efecto de mezclar el contenido en mi menú, como se muestra.
Menú Max Mega en el teléfono Android con columnas mixtas
Tampoco se mostró el widget de video correctamente. Hay un problema con la capacidad de respuesta en una pantalla pequeña.
Pantalla de widget de video dispuesta en el teléfono Android
Cómo crear un mega menú con Ubermenu Ubermenu ofrece un control mucho más fino sobre su mega. Cada elemento de menú se puede personalizar. También hay un panel de control global donde algunas opciones se pueden establecer y heredar, por ejemplo, las dimensiones de imagen predeterminadas. Hay más de 20 construidos en la piel. Elegí “verde simple”. Los controles individuales del artículo son:
Configuración general de variedades, incluida la elección de la alineación del texto y la adición de la identificación CS.Pictograma o ID de identificación Un icono que se mostrará en el menú. Para todo el rango, necesita la extensión de los iconos de Ubermenu ($ 8).
Imagen: cualquier imagen que se mostrará cerca del elemento de menú.
Apariencia: elija la pantalla de columna y la posición de cualquier imagen usada.
Submenu: configure la pantalla Submenu.
Contenido personalizado: agregue rápidamente HTML y códigos cortos sin usar un widget.
Widgets: inserte las áreas de widgets en los menús y elija el número de columnas.
Personalice el estilo: seleccione los colores y el relleno para diferentes elementos de menú.
Reactivo: se oculta o deshabilita el menú en diferentes puntos de interrupción.
Depreciado: puede ignorar esto de manera segura si es un nuevo usuario.
Cosas interesantes que puede hacer con Ubermenu #1 avanzado. Creación de un submenú para una página de contacto con un mapa de Google y un formulario de contacto I Hice esto usando el elemento de área de widget establecido en dos columnas. Los dos widgets se agregaron a un área llamada widgets de Ubermenu en apariencia> widgets.
Widget Ubermenu con mapa de Google y formulario de contacto
#2. Creando una apariencia personalizada con dos columnas hice esto con los artículos en la columna para mi sopa de submenú.
Submenú de sopa de Ubermenu usando columnas
#3. Agregar las últimas tres publicaciones de blog en el “blog” esto fue mucho más fácil que hacer lo mismo en el menú Max Mega, porque podría elegir tres columnas automáticas. El elemento “Publicaciones dinámicas” tiene algunas consultas WP avanzadas. Si quisiera, podría haber filtrado las categorías, cambiar el pedido de pedido o excluir las publicaciones. Blog en la columna Ubermenu 3 con publicaciones dinámicas
#4. Usando un submenú con hojas que dejan de lado el tema de la comida, instalé WooCommerce y sus datos ficticios. Aquí está la configuración del menú para mi tienda, utilizando el bloque de pestañas.
Siguration Ubermenu para la tienda con archivos
Ajusté el número de publicaciones dinámicas para cada categoría de productos para que coincida con el submenú.
Tienda Ubermenu con submenú con archivos
El uso de Ubermenu para tableta y dispositivos móviles en mi teléfono, descubrí que alcanzar un elemento de menú de nivel superior se abrió una vez que el submenú, mientras lo llegaba nuevamente, abrió la página respectiva. Era beneficioso que el usuario accediera a los elementos de menú de nivel superior, aunque me pareció que ese comportamiento especial del menú es ligeramente inesperado. Cada submenú tiene un enlace de cierre en la parte inferior para cerrarlo. Los aspectos de mis columnas se guardaron para el submenú Ciorbe.
Sopas submenú de Ubermenu en el teléfono Android
Sin embargo, seguí teniendo problemas con el widget de video que funciona en una apariencia de columna. Un artículo de contenido personalizado con el código de incorporación de video funcionó mejor, pero se interrumpió en dispositivos móviles.
Ubermenu con contenido de video personalizado incorporado en el teléfono Android
La interfaz de filete pasó de hojas horizontales a escritorio a hojas verticales en dispositivos móviles. Submeni con archivos Ubermenu en el teléfono Android
¿Son los mega menú para todos? Los mega menús son fuertes y funcionan bien para ciertas industrias, como los negocios actuales, la educación y el comercio electrónico. Pueden ser una buena forma de:
Destaca las categorías de productos y los artículos de venta para tiendas en línea.
Traiga a los usuarios conscientes de las secciones menos obvias de un sitio y explique el propósito e.
Muestre las imágenes presentadas para publicaciones o fotos de los productos.
Pero no son adecuados para ningún tipo de sitio. Si tiene un sitio pequeño y simple, el uso de un menú Mega será exagerado. Como ha visto, el comportamiento del menú Mega debe verificarse cuidadosamente para evitar problemas de visualización e interacción. Además, los menús grandes pueden no ser deseables para dispositivos móviles. También hay posibles problemas de SEO con mega hombres, hasta muchos enlaces pueden conducir a una dilución de “enlace de jugo”. Finalmente, los mega menús que desaparecen demasiado rápido cuando los usuarios están tratando de interactuar con ellos son un no. Independientemente del enfoque que adopte, es importante planificar la navegación de su sitio lógicamente y evitar que el usuario tenga demasiados clics para lograr el objetivo deseado. También deberías:
Tiene un cuadro de búsqueda visible en cada página.
Enumere las páginas secundarias en sus páginas de nivel superior.
Considere el uso de un mapa del sitio.
¿Has usado mega menús en un sitio?Ayudó a la experiencia del usuario?Cuéntanos qué piensas en los comentarios a continuación.
menús
navegación
