Construye un Mega Menú con Ultimenu y Bootstrap en Drupal 8

Uno de nuestros clientes preguntó cómo crear un mega menú en Drupal 8.

Los mega menús son menús con navegación de varias columnas. Se están convirtiendo rápidamente en una tendencia en el diseño web.

El módulo Ultimenu le permite insertar bloques de Drupal en un menú. Puede usarlo fácilmente para crear diseños de menú bastante complejos.

En este tutorial, aprenderá cómo crear un mega menú simple usando el módulo Ultimenu y Bootstrap.

El objetivo del cliente era crear un mega menú similar al de la imagen a continuación:

Los menús desplegables del mega menú deben tener un ancho del 100 %. Su contenido debe ser bloques de Drupal.

El enfoque Ultimenu

El módulo Ultimenu genera un bloque para cada menú que agregas en la página de menús de tu instalación de Drupal (admin/estructura/menú).

Puede colocar este bloque en la pantalla Diseño de bloques como cualquier otro bloque. El módulo convierte los elementos del menú en regiones dinámicas en la página de diseño de bloques.

De esa manera, puede insertar bloques (bloques personalizados, vistas, etc.) en estas regiones.

Un bloque que contiene regiones que contienen bloques:

Paso 1. Instalar el módulo

• Instale el módulo con composer:

composer require drupal/ultimenu

• Después de la descarga, haga clic en Extender y habilite el módulo. No se requieren más dependencias:

Paso 2. Crea el menú

• Haga clic en Estructura > Menús .
• Busque la Navegación Principal
• Haz clic en el menú Editar .

• Haga clic en el botón Agregar enlace
• Agregue los elementos del menú de primer nivel:

El enlace Viajar apunta a la route:<nolink> . Este elemento principal solo está ahí para contener otros elementos:

Paso 3. Configurar el bloque Ultimenu

• Haga clic en Estructura > Ultimenu .
• Seleccione la pestaña Navegación principal en los bloques verticales de Ultimenu
• Haga clic en Guardar configuración :

• Haz clic en Regiones de Ultimenu.
• Selecciona Ultimenu:principal: Viajar

Ultimenu creará esta región dinámicamente en la página Diseño de bloques , para que pueda colocar bloques en ella.

• Haga clic en Guardar configuración :

La pestaña de extras de Ultimenu tiene opciones de configuración adicionales. No voy a marcar ninguna de estas opciones. Lea la documentación del módulo para comprender cómo funcionan estas opciones, especialmente si está creando un sitio multilingüe.

Etapa 4. El bloque de imagen

Para colocar una imagen en un bloque, debe crear un tipo de bloque personalizado con el campo Imagen .

• Haga clic en Estructura > Diseño de bloques > Biblioteca de bloques personalizados > Tipos de bloques .
• Haga clic en el botón Agregar tipo de bloque personalizado :

• Asigne al tipo de bloque un nombre propio.
• Haga clic en Guardar:

• Haga clic en Administrar campos.
• Elimine el campo Cuerpo .
• Haga clic en Agregar campo.
• Agregue el campo Imagen .
• Guárdelo con los valores predeterminados.
• Haz clic en Administrar pantalla.
• Ocultar la etiqueta Bloquear :

• Haga clic en Estructura > Diseño de bloques > Biblioteca de bloques personalizados > Agregar bloque personalizado :

• Haz clic en Bloquear con imagen :

• Sube una imagen.
• Haga clic en Guardar:

Paso #5. El bloque de enlaces

Hay muchas formas de obtener un bloque con enlaces en cuatro columnas, por ejemplo con Vistas.

Estoy trabajando con un subtema de Bootstrap en este tutorial. Voy a usar un bloque básico con marcas y clases de Bootstrap.

Consulta este tutorial para aprender a crear un subtema de Bootstrap en Drupal.

• Haga clic en Agregar bloque personalizado una vez más.
• Seleccione Bloque básico esta vez.
• Dale al bloque un nombre propio.
• Seleccione HTML completo como formato de texto en el editor.
• Haga clic en el botón Fuente .
• Pegue el siguiente código en la ventana del editor:

 <div class="row"> <div class="col-sm-3"> <h3>Top destinations</h3> <ul> <li><a href="#">North America</a></li> <li><a href="#">Latin America</a></li> <li><a href="#">Middle East</a></li> <li><a href="#">Europe</a></li> <li><a href="#">Africa</a></li> </ul> </div> <div class="col-sm-3"> <h3>Editor's choice</h3> <ul> <li><a href="#">Best Hotel Deals</a></li> <li><a href="#">Cruise Deals</a></li> <li><a href="#">City Breaks</a></li> <li><a href="#">Activities</a></li> <li><a href="#">Culture</a></li> </ul> </div> <div class="col-sm-3"> <h3>City breaks</h3> <ul> <li><a href="#">Paris</a></li> <li><a href="#">Hong Kong</a></li> <li><a href="#">Rome</a></li> <li><a href="#">London</a></li> <li><a href="#">Tokyo</a></li> </ul> </div> <div class="col-sm-3"> <h3>Custom menu</h3> <ul> <li><a href="#">Disclaimer</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Advertisement</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div>

• Haga clic en Guardar.

Paso #6. Coloque el bloque Ultimenu

• Haga clic en Estructura > Diseño de bloque .
• Deshabilite el bloque de navegación principal predeterminado.
• Coloque el Ultimenu: Navegación principal en la región Navegación (plegable).
• Desmarque Mostrar título .
• Haz clic en Guardar bloque .

Paso #7. Coloque los bloques en la región "Viaje"

• Desplácese hacia abajo hasta la parte inferior de la página.

Verá la región generada dinámicamente que asignó al configurar su Ultimenu.

• Haz clic en Colocar bloque :

• Coloque el bloque personalizado de imagen en esta región.
• Desmarque Mostrar título.
• Haz clic en Guardar bloque.
• Repita el proceso con el bloque de marcado Bootstrap :

• Reorganiza el orden de los bloques si es necesario.
• Haz clic en Guardar bloques :

Ahora ve a la página principal de tu sitio y echa un vistazo al menú. Se requieren un par de ajustes de CSS.

Paso #8. el css

De manera predeterminada, el archivo de bibliotecas de su subtema apunta al archivo style.css dentro de la carpeta css/ dentro de su subtema Bootstrap.

• Agregue el siguiente código a ese archivo:

 /* Google fonts */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); /* Menu Links */ .ultimenu__link { text-transform: uppercase; font-family: 'Roboto', sans-serif; color: #000; font-size: 1.1em; display: inline-block; font-weight: 700; padding: 0.8em; } .has-ultimenu:hover { background-color: #FFF; } /* Image Block */ #block-megamenuimage { width: 100%; } #block-megamenuimage img { width: 100%; } /* Links block */ #block-multicolumnblock { width: 100%; } #block-multicolumnblock h3 { text-transform: uppercase; font-family: 'Roboto', sans-serif; background: #000; color: beige; font-size: 1em; display: inline-block; font-weight: 700; padding: 0.8em; border-radius: 10px; } #block-multicolumnblock li { list-style: none; border-top: 0.5px dashed #333; } #block-multicolumnblock li:last-child { border-bottom: 0.5px dashed #333; } #block-multicolumnblock li a { text-decoration: none; color: #333; display: block; line-height: 2.5em; }

A estas alturas, ya debería haber notado cómo modificar el menú usted mismo:

Resumen

Acabas de aprender a crear megamenús en Drupal utilizando el módulo Ultimenu, Bootstrap y un enfoque de "bloque Drupal" fácil de entender.

¡Gracias por leer!