Come utilizzare il modulo Extra delle voci di menu per Drupal 8

I mega menu non sono più una tendenza del design, ma una parte essenziale della maggior parte dei siti Web relativi alle notizie o all'eCommerce.

Il modulo Menu Item Extras per Drupal 8 migliora il sistema di menu predefinito in Drupal, consentendo al costruttore del sito di aggiungere campi alle voci di menu. In questo modo è possibile creare un mega menu con un paio di semplici passaggi.

Segui insieme per imparare a usare questo modulo. Iniziamo!

Passaggio 1: installa i moduli richiesti

Oltre al modulo Menu Item Extras, dovrai installare Viewfield. Viewfield fornisce un campo che contiene un riferimento a una vista e lo rende ogni volta che viene visualizzata l'entità contenente il campo.

• Apri l'applicazione terminale del tuo PC.
• Tipo :
  • il compositore richiede drupal/viewfield
  • compositore require drupal/menu_item_extras

Abilita entrambi i moduli dopo il download.

• Fare clic su Estendi.
• Controllare entrambi i moduli.
• Fare clic su Installa.

Passaggio 2: crea un sistema di tassonomia

Forse la parola "sistema" non è molto appropriata poiché creeremo solo un vocabolario con dieci termini associati. Tuttavia, questo esempio spiegherà le nozioni di base, in modo da poter lavorare con sistemi di tassonomia più complicati in futuro.

• Fare clic su Struttura > Tassonomia > Aggiungi vocabolario.
• Immettere il nome "Argomenti" e fare clic su Salva.
• Fai clic su Aggiungi termine e aggiungi tutti i termini descritti di seguito uno per uno.
  • Temi
    • D8
    • Symfony
    • WP
    • Magento
    • CSS
    • HTML
    • JS
    • PHP
    • Pitone
    • DevOps

Passaggio 3: crea i tipi di contenuto

Ai fini di questo tutorial, utilizzeremo 2 tipi di contenuto con i seguenti campi:

• Servizi
  • Immagine di servizio / Immagine / Numero consentito di valori: 1
  • Testo introduttivo/Testo (formattato)/Numero consentito di valori: 1
  • Descrizione / Campo predefinito

• Blog
  • Categoria / Termine tassonomico / Numero consentito di valori: illimitato
  • Descrizione / Campo predefinito

Assicurati di selezionare il Tipo di riferimento (Argomenti) durante la creazione del campo Tassonomia.

Passaggio 4: crea contenuto

Creeremo 3 nodi di tipo Service:

• Tutorial
• Video
• Libri

Ciascuno di questi nodi sarà associato a un elemento di secondo livello nel mega menu. D'altra parte, creeremo circa 10 nodi di tipo Blog con termini diversi ad essi associati. Assicurati di includere 2 dei termini (es.: D8, WP) con più frequenza degli altri.

La schermata Contenuto dovrebbe apparire alla fine di questo processo più o meno come l'immagine qui sotto.

Passaggio 5: crea le voci di menu

Il primo livello del menu principale avrà le seguenti voci di menu:

• Casa
• Di
• Risorse
• Contatto

Ciascuna delle voci di menu avrà un campo aggiuntivo (extra). Questo campo verrà impostato al secondo livello del menu, ovvero ciascuno degli elementi della carta nel mega menu. Questo campo ci consentirà di presentare ciascuno dei blocchi di visualizzazione.

• Fare clic su Struttura > Menu.
• Fare clic sul menu Modifica per modificare la navigazione principale.

• Fare clic su Aggiungi collegamento 3 volte per aggiungere le voci di menu di primo livello mancanti.
• Fare clic su Salva ogni volta che si immette il nome di una voce di menu.

Utilizzare il tag speciale per visualizzare solo il testo del collegamento.

Dopo aver creato e riorganizzato i collegamenti del tuo menu,

• Fare clic su Gestisci campi > ​​Aggiungi campo per aggiungere un campo alle voci di menu.
• Seleziona un campo di tipo Viewfield.
• Dagli un nome e un'etichetta appropriati.
• Fare clic su Salva e continua.

• Impostare il Numero consentito di valori su Illimitato.
• Fare clic su Salva impostazioni campo

Avrai la possibilità di collegare una vista predefinita a questo campo particolare. Lascia vuoti questi campi.

• Scorri verso il basso e fai clic su Salva impostazioni
• Fare clic su Gestisci visualizzazione.

• Nascondi l'etichetta della scheda menu.
• Fare clic su Salva.

Passaggio 6: crea le viste

• Fare clic su Struttura > Viste > Aggiungi vista
• Mostra contenuto di tipo Servizi.
• Crea un blocco con un elenco di campi non formattato.
• Scegli di mostrare 3 elementi per blocco.
• Fare clic su Salva e modifica.

• Aggiungi il campo Immagine del servizio
• Imposta lo stile dell'immagine su Miniatura e collega l'immagine al Contenuto.
• Fare clic su Applica

• Aggiungi anche il campo di testo Intro.
• Riordina i campi.
• Fare clic su Salva.

• Fare clic su Struttura > Viste > Aggiungi vista
• Mostra contenuto di tipo Blog.
• Crea un blocco con un elenco di campi non formattato.
• Scegli di mostrare 1 elemento per blocco.
• Fare clic su Salva e modifica.

• Aggiungi il campo Categoria.
• Fare clic su Aggiungi e configura campi.
• Fare clic su Impostazioni campo multiplo.
• Seleziona Elenco non ordinato.
• Impostare il numero di valori da visualizzare su 3.
• Fare clic su Applica.

• Rimuovere il criterio di ordinamento
• Fare clic su Applica.
• Fare clic su Salva per salvare la vista.

Passaggio 7: aggiungi i blocchi di visualizzazione alle voci di menu

• Fare clic su Struttura > Menu
• Modifica la navigazione principale.
• Modifica la voce di menu Risorse.
• Aggiungi i 2 blocchi che hai creato nel passaggio n. 5.
• Fare clic su Salva.

Passaggio 8: gli stili CSS

Non spiegherò questo codice in dettaglio poiché non rientra nell'ambito di questo tutorial. Tuttavia, puoi cercare di più su Drupal Views e CSS Grid in questo articolo. Se vuoi esercitarti di più con i mega menu, dai un'occhiata anche a questo articolo.

 #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;
 }

Spero che questo tutorial ti sia piaciuto. Grazie per aver letto!