Cómo crear un icono de hamburguesa para su menú Divi Mega

Publicado: 2017-04-18

Los iconos de hamburguesas se han convertido en sinónimo de menús. Las tres líneas horizontales apiladas representan la idea de una lista y han sido apodadas "hamburguesa" por sus obvias similitudes. Divi usa el ícono de hamburguesa para alternar su menú principal en el móvil y en ciertos estilos de encabezado como "deslizar hacia adentro" y "pantalla completa".

Hoy les mostraré cómo usar un ícono de hamburguesa para alternar un mega menú al hacer clic. Esta es una gran solución para aquellos sitios con muchas opciones de menú. El icono de hamburguesa mantiene libre el desorden del encabezado. Además, el diseño organizado de 4 columnas del mega menú permite a los usuarios encontrar lo que necesitan de manera rápida y eficiente.

El antes y el después

De forma predeterminada, el mega menú funciona colocando el cursor sobre el enlace del menú principal principal:

Después de implementar el nuevo diseño y la funcionalidad, el mega menú solo se muestra cuando hace clic en el icono de la hamburguesa.

Implementando el diseño con Divi

Suscríbete a nuestro canal de Youtube

Convierta su menú en un mega menú

Primero necesitas crear un mega menú o cambiar tu menú actual a un mega menú. Esta parte es bastante simple.

Desde el panel de WordPress, vaya a Apariencia → Menús. Haga clic en Crear nuevo menú y asigne un nombre a su menú.

Haga clic en Crear menú

Asegúrese de activar la propiedad del menú Clases CSS haciendo clic en la pestaña Opciones de pantalla en la parte superior derecha de la pantalla Menús y marcando Clases CSS.

Ahora puede agregar los elementos de su menú al nuevo menú que creó.

Primero, agreguemos el elemento del menú que servirá como nuestro ícono de hamburguesa. Este elemento del menú será el padre de todos los demás elementos del menú.

Para crear este elemento de menú, cree un enlace personalizado con la siguiente configuración: 

URL: http://#

Navigation Label: <div class="hamburger"></div>

CSS Classes: mega-menu

La URL es simplemente un hashtag (#) porque este elemento del menú no se vinculará a ninguna página determinada. Usaremos este elemento de menú para implementar nuestro mega menú al hacer clic.

La etiqueta de navegación tiene un código html simple (un div con una clase de "hamburguesa"). Esto será lo que usaremos para mostrar nuestro ícono de hamburguesa usando CSS personalizado.

El "mega menú" de la clase CSS es lo que despliega la funcionalidad del mega menú. Esta clase CSS solo debe aplicarse una vez al elemento del menú principal principal y no a ninguno de los elementos secundarios.

Ahora es el momento de agregar los elementos del menú que conformarán su mega menú. Para este ejemplo, estoy usando los siguientes elementos del menú principal y del submenú en el elemento del mega menú principal:

  • Enlace de icono de hamburguesa de mega menú
    • Sobre nosotros
      • Nuestro equipo
      • Nuestra misión
      • Historia de la Compañía
    • Servicios
      • Diseño web
      • Desarrollo web
      • SEO
    • Nuestro trabajo
      • Blogs
      • Comercio electrónico
      • Corporativo
    • Contáctenos
      • Apoyo
      • Direcciones
      • Trabajos

Ahora organice / arrastre los cuatro elementos del menú (cada uno con tres elementos secundarios propios) para que se conviertan en elementos secundarios del enlace principal del Mega Menú principal.

Cuando haya terminado de organizar el menú, asegúrese de marcar Menú principal en Configuración del menú.

Menú Guardar

Agregar jQuery para mostrar el menú al hacer clic en lugar de al pasar el mouse

Ahora que su mega menú está creado, necesitamos agregar algo de jQuery para que nuestro mega menú se muestre al hacer clic en el ícono en lugar de al pasar el mouse (que es el predeterminado). Para hacer esto, vaya a Opciones de tema → Integración y agregue el siguiente script en la sección "Agregar código al encabezado de su blog": 

<script>
/*** Open menu itmes with children on click not hover ***/

(function($) {

jQuery(document).ready(function() {
jQuery('#top-menu li.mega-menu > a, #et-secondary-nav li.mega-menu > a').click(function(e) {
e.preventDefault();

jQuery(this).parent().toggleClass('show-submenu');
});
});

jQuery(document).click(function(e) {
if(!$(e.target).closest('.show-submenu').length) {
jQuery('.show-submenu').removeClass('show-submenu');
}
});

})(jQuery);
</script>

Agregar CSS personalizado

Mientras se encuentra en Opciones de tema, en Configuración general, agregue el siguiente CSS personalizado: 

/*** hides sub-menu on hover ***/
#et-top-navigation #top-menu li.et-hover ul.sub-menu { display: none!important; }

/*** shows submenu on click ***/
#et-top-navigation #top-menu li.show-submenu ul.sub-menu { display: block!important; visibility: visible!important; opacity: 1!important; }

/*** Hide hamburger menu item on mobile ***/
.et_mobile_menu .mega-menu >
 a{display:none;}


#top-menu .mega-menu > a, #et-secondary-nav .mega-menu > a {padding-bottom: 24px !important;}

/**** hide down arrow ****/
#top-menu .mega-menu > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {display: none;}

/*** show hamburger icon ***/
.hamburger:before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 0.6em;
    text-transform: none;
    speak: none;
    position: relative;
    cursor: pointer;
    top: 0;
    left: 0;
    vertical-align: -11px;
    padding-right: 3px;
    font-size: 32px; /*change size of icon here*/
    content: "\61"; /*change icon here*/
    color: #333; /*change color of icon here*/
}

/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
    content: "\4d"; /*change x icon here*/
}

¡Eso es todo!

Ahora ve y mira tus resultados

Más opciones de personalización

El CSS que ingresó tiene comentarios en todas partes para que pueda realizar cambios en el estilo de su icono de hamburguesa. Aquí es donde puede encontrar las dos secciones principales de CSS para diseñar su icono:

Cambiar el icono de la hamburguesa

Divi viene con una variedad de íconos de fuentes que puede usar para su sitio. Si desea cambiar el ícono de hamburguesa por un estilo diferente, todo lo que necesita hacer es buscar y editar la línea de CSS etiquetada con el comentario "cambiar ícono aquí": 

content: "\61"; /*change icon here*/

Aquí están los diferentes valores de contenido para los diferentes íconos de hamburguesa. Simplemente reemplace "\ 61" con uno de los siguientes:

Menú de icono cuadrado - \ 62

Menú de iconos de círculo - \ 63

ul Icono - \ 64

ol Icono - \ 65

Icono de menú cuadrado oscuro - \ e056

Icono de menú circular oscuro - \ e057

Cambiar el icono "X"

Si está utilizando el icono de menú de hamburguesa diferente, debe cambiar el icono "x" para que coincida con el diseño. Simplemente busque el siguiente CSS: 

/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
    content: "\4d";
}

Reemplace "\ 4d" con uno de los siguientes valores de contenido:

Icono de menú de cierre de círculo - \ 51

Círculo Cerrar icono de menú oscuro - \ e051

Así es como se ve el icono de hamburguesa del mega menú con estilos de iconos de círculo oscuro complementarios en su lugar:

Cambiar el color de su icono de hamburguesa

Si desea cambiar el color de su icono de hamburguesa, edite esta línea de CSS con la etiqueta "cambiar el color del icono": 

Color: #333; /*change icon color here*/

Cambiar el tamaño de su icono de hamburguesa

Si desea cambiar el tamaño de su icono de hamburguesa, edite esta línea de CSS con la etiqueta "cambiar el tamaño del icono aquí": 

Font-size: 32px; /*change size of icon here*/

Agregar una etiqueta a su icono de hamburguesa

Es fácil agregar una etiqueta a su ícono. Simplemente vuelva a Apariencia → Menús y edite el elemento del menú superior que le dio a la clase "megamenú". En el cuadro de texto de la etiqueta de navegación, agregue el texto de la etiqueta dentro del div. Para este ejemplo, agregué la etiqueta "menú".

<div class=”hamburger”>menu</div>

Ahora su hamburguesa tiene una etiqueta al lado.

¿Sensible?

Los megamenús solo funcionan en tamaños de pantalla de más de 980 px. Para un tamaño de pantalla inferior a 980px (tabletas y teléfonos inteligentes), el menú cambiará al menú móvil predeterminado.

Pensamientos finales

Si te gustan los mega menús y buscas crear un diseño limpio y minimalista para tu encabezado, agregar un ícono de hamburguesa para mostrar tu mega menú es una gran solución. Ahora sus usuarios pueden ver todos sus enlaces de navegación a la vez con un simple clic.

Además, los íconos de fuente integrados de Divi facilitan la personalización de los íconos de hamburguesa usando css, sin tener que crear íconos desde cero.

También puede agregar imágenes a sus mega menús para crear mega menús aún más destacados.

¡Eso es todo!

Espero que disfrutes de esta función. Esperamos tener noticias tuyas en los comentarios.