Crea un Mega Menu con Ultimenu e Bootstrap in Drupal 8

Uno dei nostri clienti ha chiesto come creare un mega menu in Drupal 8.

I mega menu sono menu con navigazione a più colonne. Stanno rapidamente diventando una tendenza nel web design.

Il modulo Ultimenu consente di inserire blocchi Drupal in un menu. Puoi facilmente usarlo per creare layout di menu abbastanza complessi.

In questo tutorial imparerai come creare un semplice mega menu usando il modulo Ultimenu e Bootstrap.

Il cliente mirava a costruire un mega menu simile a quello nell'immagine qui sotto:

I mega menu a discesa dovrebbero avere una larghezza del 100%. Il loro contenuto deve essere blocchi Drupal.

L'approccio Ultimenù

Il modulo Ultimenu genera un blocco per ogni menu che aggiungi nella pagina dei menu della tua installazione Drupal (admin/struttura/menu).

Puoi posizionare questo blocco nella schermata di layout del blocco come qualsiasi altro blocco. Il modulo trasforma le voci di menu in regioni dinamiche nella pagina di layout del blocco.

In questo modo puoi inserire blocchi (blocchi personalizzati, viste, ecc.) in queste regioni.

Un blocco contenente regioni contenenti blocchi:

Passo 1. Installa il modulo

• Installa il modulo con il compositore:

composer require drupal/ultimenu

• Dopo il download, fare clic su Estendi e abilitare il modulo. Non sono necessarie ulteriori dipendenze:

Passo 2. Crea il menu

• Fare clic su Struttura > Menu .
• Cerca la Navigazione principale
• Fare clic sul menu Modifica .

• Fare clic sul pulsante Aggiungi collegamento
• Aggiungi le voci di menu di primo livello:

Il collegamento Viaggio punta al route:<nolink> . Questo elemento padre è lì solo per contenere altri elementi:

Passaggio 3. Configura il blocco Ultimenu

• Fare clic su Struttura > Menu avanzato .
• Selezionare la scheda Navigazione principale nei blocchi verticali di Ultimenu
• Fare clic su Salva configurazione :

• Fare clic su Regioni di Ultimenu.
• Seleziona Ultimenu:principale: Viaggia

Ultimenu creerà questa regione dinamicamente nella pagina Block Layout , in modo che tu possa posizionare i blocchi in essa.

• Fare clic su Salva configurazione :

La scheda Oggetti di Ultimenu ha opzioni di configurazione aggiuntive. Non controllerò nessuna di queste opzioni. Per favore, leggi la documentazione del modulo per capire come funzionano queste opzioni, in particolare se stai costruendo un sito multilingue.

Passaggio 4. Il blocco dell'immagine

Per posizionare un'immagine in un blocco, è necessario creare un tipo di blocco personalizzato con il campo Immagine .

• Fare clic su Struttura > Layout blocco > Libreria blocchi personalizzata > Tipi di blocco .
• Fare clic sul pulsante Aggiungi tipo di blocco personalizzato :

• Assegna un nome proprio al tipo di blocco.
• Fare clic su Salva:

• Fare clic su Gestisci campi.
• Elimina il campo Corpo .
• Fare clic su Aggiungi campo.
• Aggiungi il campo Immagine .
• Salvalo con le impostazioni predefinite.
• Fare clic su Gestisci visualizzazione.
• Nascondi l'etichetta Blocco :

• Fare clic su Struttura > Layout blocco > Libreria blocchi personalizzati > Aggiungi blocco personalizzato :

• Fare clic su Blocca con immagine :

• Carica un'immagine.
• Fare clic su Salva:

Passaggio #5. Il blocco dei collegamenti

Esistono molti modi per ottenere un blocco con collegamenti in quattro colonne, ad esempio con Visualizzazioni.

Sto lavorando con un sottotema Bootstrap in questo tutorial. Userò un blocco di base con markup e classi Bootstrap.

Dai un'occhiata a questo tutorial per imparare come creare un sottotema Bootstrap in Drupal.

• Fai di nuovo clic su Aggiungi blocco personalizzato .
• Seleziona Blocco di base questa volta.
• Assegna un nome proprio al blocco.
• Seleziona HTML completo come formato di testo nell'editor.
• Fare clic sul pulsante Sorgente .
• Incolla il seguente codice nella finestra dell'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>

• Fare clic su Salva.

Passaggio #6. Posiziona il blocco Ultimenu

• Fare clic su Struttura > Layout blocco .
• Disabilita il blocco di navigazione principale predefinito.
• Posiziona Ultimenu: Navigazione principale nella regione Navigazione (comprimibile).
• Deseleziona Visualizza titolo .
• Fare clic su Salva blocco .

Passaggio #7. Posiziona i blocchi nella regione "Viaggio".

• Scorri verso il basso fino alla fine della pagina.

Vedrai la regione generata dinamicamente che hai assegnato durante la configurazione del tuo Ultimenu.

• Fare clic su Inserisci blocco :

• Posiziona il blocco personalizzato dell'immagine in questa regione.
• Deseleziona Mostra titolo.
• Fare clic su Salva blocco.
• Ripeti il processo con il blocco di markup Bootstrap :

• Riorganizzare l'ordine dei blocchi, se necessario.
• Fare clic su Salva blocchi :

Ora vai alla prima pagina del tuo sito e dai un'occhiata al menu. Sono necessarie un paio di modifiche CSS.

Passaggio 8. Il CSS

Per impostazione predefinita, il file delle librerie del sottotema punta al file style.css all'interno della cartella css/ all'interno del sottotema Bootstrap.

• Aggiungi il seguente codice a quel file:

 /* 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; }

Ormai dovresti aver già notato come modificare il menu da solo:

Riepilogo

Hai appena imparato a costruire megamenu in Drupal usando il modulo Ultimenu, Bootstrap e un approccio "Blocco Drupal" di facile comprensione.

Grazie per aver letto!