Creating Mega Menus in Divi

Los mega menús son una excelente manera de consolidar tus elementos de menú excesivos.

Los Mega Menús  permiten a los usuarios ver más enlaces al mismo tiempo sin la molestia de tener que desplazarse, pasar el cursor o recordar el contenido del menú.

Los Mega Menús pueden pensarse como menús desplegables dentro de otros menús desplegables. A diferencia de un menú desplegable estándar, que solo muestra un submenú al pasar el cursor sobre un enlace principal en la barra de navegación, un mega menú te permite tener enlaces principales adicionales y submenús dentro del mismo menú desplegable.

Esto ofrece una experiencia de navegación más organizada y completa para el usuario.

Cómo agregar un Mega Menú a tu barra de navegación

1. Accede al panel de WordPress

Ve a Apariencia → Menús.

 2. Crea un menú con cuatro enlaces principales, y  debajo de cada uno, añade tres subelementos.

1. Por ejemplo: Estoy añadiendo tres elementos de submenú debajo de cada uno de los cuatro enlaces principales del menú.

 3.  Crea un enlace adicional que servirá como el  enlace principal del mega menú. En este ejemplo, se llama "Features" (Características). Luego, arrastra los cuatro enlaces principales del menú (cada uno con sus submenús) debajo del enlace Características.

4. Para crear un Mega Menú, necesitas agregar una clase CSS especial llamada mega-menu al enlace principal de nivel superior. Para hacerlo, haz clic en el enlace Opciones de pantalla en la parte superior de tu página y asegúrate de que la opción Clases CSS esté marcada. Esto te permitirá añadir la clase necesaria a tu enlace y crear un Mega Menú fácilmente.

5. Habilitar la clase CSS

Agrega  la clase CSS mega-menu al enlace Características que creaste. Haz clic en la flecha a la derecha del elemento del menú Características para desplegar las opciones adicionales de configuración. Busca el cuadro de texto Clases CSS y escribe la clase mega-menu.

Agregar la clase CSS al ítem del menú

Cuando recargues la página, verás que todos esos menús anteriores ahora se han agrupado en un solo menú gigante bajo este enlace, el Mega Menú.

• Popular Articles

• How to Create an App for Restaurants (with or without Delivery)

  Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...

• APPS: Radio

  The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...

• APPS: Webhooks

  The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...

• APPS: Audio & Music

  How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...

• QR Promotions

  This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...

• Related Articles

• The Divi Menu Module

  Cómo agregar, configurar y personalizar el módulo Menú de Divi. El Módulo Menú de Divi te permite colocar un menú de navegación en cualquier parte de tu página. Puedes usar este módulo para añadir una navegación secundaria en el diseño de la página, ...

• The Divi Fullwidth Menu Module

  Cómo añadir, configurar y personalizar el módulo de menú de ancho completo de Divi <br> El módulo de menú de ancho completo de Divi te permite colocar un menú de navegación de ancho completo en cualquier parte de tu página. Puedes usar ...

• Using Divi Presets

  Divi's predefined settings greatly speed up your design process by allowing you to take the design of any element and apply it to other modules. Divi is highly customizable, allowing you to make Divi modules and other elements look as you like. ...

• Using Sizing Options in Divi

  Divi Size Options make it easy to adjust the size of sections, rows, columns and modules in Divi. Divi Size Options make adjusting the size of sections, rows, columns and modules simple. Size is an essential part of creating attractive websites. ...

• Getting Started with the Divi Builder

  What is the Divi Visual Builder? Divi is a modern visual builder for WordPress that does not require programming and works by drag-and-drop. With Divi, you can create stunning websites from scratch without writing a single line of code (unless you ...