Cómo usar el módulo Extras de elementos de menú para Drupal 8

Los mega menús ya no son una tendencia de diseño, sino una parte esencial de la mayoría de los sitios web relacionados con noticias o comercio electrónico.

El módulo Extras de elementos de menú para Drupal 8 mejora el sistema de menú predeterminado en Drupal, al permitir que el creador del sitio agregue campos a los elementos de menú. De esa manera, es posible crear un mega menú con un par de pasos simples.

Siga para aprender a usar este módulo. ¡Empecemos!

Paso #1: Instale los Módulos Requeridos

Además del módulo Extras de elementos del menú, deberá instalar Viewfield. Viewfield proporciona un campo que contiene una referencia a una vista y la representa cada vez que se muestra la entidad que contiene el campo.

• Abra la aplicación de terminal de su PC.
• Tipo :
  • el compositor requiere drupal/viewfield
  • el compositor requiere drupal/menu_item_extras

Habilite ambos módulos después de la descarga.

• Haga clic en Extender.
• Compruebe ambos módulos.
• Haga clic en Instalar.

Paso #2: Cree un Sistema de Taxonomía

Quizás la palabra “sistema” no sea muy adecuada ya que solo crearemos un vocabulario con diez términos asociados. Sin embargo, este ejemplo explicará los conceptos básicos, para que pueda trabajar con sistemas de taxonomía más complicados en el futuro.

• Haga clic en Estructura > Taxonomía > Agregar vocabulario.
• Ingrese el nombre "Temas" y haga clic en Guardar.
• Haga clic en Agregar término y agregue todos los términos detallados a continuación uno por uno.
  • Temas
    • D8
    • Symfony
    • WP
    • Magento
    • CSS
    • HTML
    • JS
    • PHP
    • Pitón
    • DevOps

Paso #3: Crea los Tipos de Contenido

A los efectos de este tutorial, vamos a utilizar 2 tipos de contenido con los siguientes campos:

• Servicios
  • Imagen de servicio / Imagen / Número permitido de valores: 1
  • Texto de introducción / Texto (formateado) / Número permitido de valores: 1
  • Descripción / Campo predeterminado

• Blog
  • Categoría / Término de taxonomía / Número permitido de valores: ilimitado
  • Descripción / Campo predeterminado

Asegúrese de seleccionar el tipo de referencia (temas) al crear el campo de taxonomía.

Paso #4: Crear contenido

Vamos a crear 3 nodos de tipo Servicio:

• Tutoriales
• Vídeos
• Libros

Cada uno de estos nodos estará asociado a un elemento de segundo nivel en el mega menú. Por otro lado, vamos a crear unos 10 nodos de tipo Blog con distintos términos asociados. Asegúrate de incluir 2 de los términos (ej.: D8, WP) con más frecuencia que los demás.

La pantalla de contenido debería verse al final de este proceso más o menos como la imagen de abajo.

Paso #5: Crea los Elementos del Menú

El primer nivel del menú principal tendrá los siguientes elementos de menú:

• Casa
• Acerca de
• Recursos
• Contacto

Cada uno de los elementos del menú tendrá un campo adicional (extra). Este campo se establecerá en el segundo nivel del menú, es decir, en cada uno de los elementos de la tarjeta del mega menú. Este campo nos permitirá presentar cada uno de los bloques de vista.

• Haga clic en Estructura > Menús.
• Haga clic en el menú Editar para editar la navegación principal.

• Haga clic en Agregar enlace 3 veces para agregar los elementos de menú de primer nivel que faltan.
• Haga clic en Guardar cada vez que ingrese un nombre de elemento de menú.

Use la etiqueta especial para mostrar solo el texto del enlace.

Una vez que haya creado y reorganizado los enlaces de su menú,

• Haga clic en Administrar campos > Agregar campo para agregar un campo a los elementos del menú.
• Seleccione un campo de tipo Viewfield.
• Dale un nombre y una etiqueta adecuados.
• Haga clic en Guardar y continuar.

• Establezca el Número permitido de valores en Ilimitado.
• Haga clic en Guardar configuración de campo

Tendrá la opción de vincular una vista predeterminada a este campo en particular. Deje estos campos vacíos.

• Desplácese hacia abajo y haga clic en Guardar configuración
• Haz clic en Administrar pantalla.

• Oculte la etiqueta de la tarjeta de menú.
• Haga clic en Guardar.

Paso #6: Crea las Vistas

• Haga clic en Estructura > Vistas > Agregar vista
• Mostrar Contenido de tipo Servicios.
• Cree un bloque con una lista de campos sin formato.
• Elija mostrar 3 elementos por bloque.
• Haga clic en Guardar y editar.

• Agregue el campo Imagen del servicio
• Establezca el estilo de imagen en Miniatura y vincule la imagen al Contenido.
• Haga clic en Aplicar

• Agregue también el campo de texto de introducción.
• Reorganizar los campos.
• Haga clic en Guardar.

• Haga clic en Estructura > Vistas > Agregar vista
• Mostrar Contenido de tipo Blog.
• Cree un bloque con una lista de campos sin formato.
• Elija mostrar 1 elemento por bloque.
• Haga clic en Guardar y editar.

• Agregue el campo Categoría.
• Haga clic en Agregar y configurar campos.
• Haga clic en la configuración de campo Múltiple.
• Seleccione Lista desordenada.
• Establezca el número de valores para mostrar en 3.
• Haga clic en Aplicar.

• Eliminar el criterio de clasificación
• Haga clic en Aplicar.
• Haga clic en Guardar para guardar la vista.

Paso #7: Agregue los bloques de vista a los elementos del menú

• Haga clic en Estructura > Menús
• Edite la navegación principal.
• Edite el elemento de menú Recursos.
• Agrega los 2 bloques que creaste en el paso #5.
• Haga clic en Guardar.

Paso #8: Los estilos CSS

No voy a explicar este código en detalle ya que está fuera del alcance de este tutorial. Sin embargo, puede investigar más sobre Drupal Views y CSS Grid en este artículo. Si quieres practicar más con los mega menús, échale también un vistazo a este artículo.

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

Espero que les haya gustado este tutorial. ¡Gracias por leer!