Construiește un mega meniu cu Ultimenu și Bootstrap în Drupal 8

Publicat: 2022-02-16

Unul dintre clienții noștri a întrebat cum să construiți un mega meniu în Drupal 8.

Mega meniurile sunt meniuri cu navigare pe mai multe coloane. Ele devin rapid o tendință în design web.

Modulul Ultimenu vă permite să introduceți blocuri Drupal într-un meniu. Îl puteți folosi cu ușurință pentru a construi aspecte de meniu destul de complexe.

În acest tutorial, veți învăța cum să construiți un mega meniu simplu folosind modulul Ultimenu și Bootstrap.

Clientul urmărea să construiască un mega meniu similar cu cel din imaginea de mai jos:

Meniurile derulante mega ar trebui să aibă o lățime de 100%. Conținutul lor trebuie să fie blocuri Drupal.

Abordarea Ultimenu

Modulul Ultimenu generează un bloc pentru fiecare meniu pe care îl adăugați în pagina de meniuri a instalării Drupal (admin/structură/meniu).

Puteți plasa acest bloc în ecranul Aspect Bloc ca orice alt bloc. Modulul transformă elementele de meniu în regiuni dinamice în pagina de aspect al blocurilor.

În acest fel, puteți insera blocuri (blocuri personalizate, vizualizări etc.) în aceste regiuni.

Un bloc care conține regiuni care conțin blocuri:

Pasul 1. Instalați modulul

Instalați modulul cu compozitor:

composer require drupal/ultimenu

După descărcare, faceți clic pe Extindere și activați modulul. Nu sunt necesare alte dependențe:

Pasul 2. Creați meniul

Faceți clic pe Structură > Meniuri .
Căutați navigația principală
Faceți clic pe meniul Editare .

Faceți clic pe butonul Adăugați link
Adăugați elementele de meniu de primul nivel:

Linkul Călătorie indică route:<nolink> . Acest element părinte este acolo doar pentru a conține alte elemente:

Pasul 3. Configurați blocul Ultimenu

Faceți clic pe Structură > Ultimenu .
Selectați fila Navigare principală în blocurile verticale Ultimenu
Faceți clic pe Salvare configurație :

Faceți clic pe Ultimenu regions.
Selectați Ultimenu:main: Travel

Ultimenu va crea această regiune în mod dinamic în pagina Bloc Layout , astfel încât să puteți plasa blocuri în ea.

Faceți clic pe Salvare configurație :

Fila Ultimenu goodies are opțiuni de configurare suplimentare. Nu voi verifica nici una dintre aceste opțiuni. Vă rugăm să citiți documentația modulului pentru a înțelege cum funcționează aceste opțiuni, în special dacă construiți un site multilingv.

Pasul #4. Blocul de imagine

Pentru a plasa o imagine într-un bloc, trebuie să creați un tip de bloc personalizat cu câmpul Imagine .

Faceți clic pe Structură > Aspect bloc > Bibliotecă bloc personalizat > Tipuri bloc .
Faceți clic pe butonul Adăugați un tip de bloc personalizat :

Dați tipului de bloc un nume propriu.
Faceți clic pe Salvare:

Faceți clic pe Gestionați câmpurile.
Ștergeți câmpul Corp.
Faceți clic pe Adăugați câmp.
Adăugați câmpul Imagine .
Salvați -l cu setările implicite.
Faceți clic pe Gestionare afișaj.
Ascunde eticheta Bloc :

Faceți clic pe Structură > Aspect bloc > Bibliotecă bloc personalizat > Adăugați bloc personalizat :

Faceți clic pe Blocare cu imagine :

Încărcați o imagine.
Faceți clic pe Salvare:

Pasul #5. Blocarea link-urilor

Există multe modalități de a obține un bloc cu legături în patru coloane, de exemplu cu Vizualizări.

Lucrez cu o subtemă Bootstrap în acest tutorial. Voi folosi un bloc de bază cu marcaj și clase Bootstrap.

Consultați acest tutorial pentru a afla cum să creați o subtemă Bootstrap în Drupal.

Faceți clic din nou pe Adăugați bloc personalizat .
Selectați de data aceasta Bloc de bază .
Dați blocului un nume propriu.
Selectați HTML complet ca format text în editor.
Faceți clic pe butonul Sursă .
Lipiți următorul cod în fereastra editorului:

 <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>

Faceți clic pe Salvare.

Pasul #6. Așezați blocul Ultimenu

Faceți clic pe Structură > Aspect bloc .
Dezactivați blocul implicit de navigare principală .
Poziționați Ultimenu: Navigație principală în regiunea Navigare (pliant).
Debifați Afișare titlu .
Faceți clic pe Salvare bloc .

Pasul #7. Plasați blocurile în regiunea „Călătorie”.

Derulați în jos până în partea de jos a paginii.

Veți vedea regiunea generată dinamic pe care ați atribuit-o atunci când vă configurați Ultimenu.

Faceți clic pe Plasați blocul :

Plasați blocul personalizat de imagine în această regiune.
Debifați Afișare titlu.
Faceți clic pe Salvare bloc.
Repetați procesul cu blocul de marcare Bootstrap :

Rearanjați ordinea blocurilor dacă este necesar.
Faceți clic pe Salvare blocuri :

Acum accesați prima pagină a site-ului dvs. și aruncați o privire la meniu. Sunt necesare câteva modificări CSS.

Pasul #8. CSS-ul

În mod implicit, fișierul biblioteci al subtemei dvs. indică fișierul style.css din folderul css/ din subtema dvs. Bootstrap.

Adăugați următorul cod la acel fișier:

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

Până acum ar fi trebuit să fi observat deja cum să modifici singur meniul:

rezumat

Tocmai ați învățat cum să construiți megameniuri în Drupal folosind modulul Ultimenu, Bootstrap și o abordare ușor de înțeles „bloc Drupal”.

Multumesc pentru lectura!