Erstellen Sie ein Mega-Menü mit Ultimenu und Bootstrap in Drupal 8

Veröffentlicht: 2022-02-16

Einer unserer Kunden fragte, wie man ein Mega-Menü in Drupal 8 erstellt.

Megamenüs sind Menüs mit mehrspaltiger Navigation. Sie entwickeln sich schnell zu einem Trend im Webdesign.

Mit dem Ultimenu-Modul können Sie Drupal-Blöcke in ein Menü einfügen. Sie können es ganz einfach verwenden, um ziemlich komplexe Menülayouts zu erstellen.

In diesem Tutorial lernen Sie, wie Sie mit dem Ultimenu-Modul und Bootstrap ein einfaches Mega-Menü erstellen.

Der Kunde wollte ein Mega-Menü ähnlich dem auf dem Bild unten erstellen:

Die Drop-downs des Mega-Menüs sollten eine Breite von 100 % haben. Ihr Inhalt müssen Drupal-Blöcke sein.

Der Ultimenu-Ansatz

Das Ultimenu-Modul generiert einen Block für jedes Menü, das Sie auf der Menüseite Ihrer Drupal-Installation (admin/structure/menu) hinzufügen.

Sie können diesen Block wie jeden anderen Block im Blocklayout-Bildschirm platzieren. Das Modul verwandelt Menüelemente in dynamische Bereiche auf der Blocklayoutseite.

Auf diese Weise können Sie Blöcke (benutzerdefinierte Blöcke, Ansichten usw.) in diese Bereiche einfügen.

Ein Block mit Regionen, die Blöcke enthalten:

Schritt 1. Installieren Sie das Modul

Installieren Sie das Modul mit Composer:

composer require drupal/ultimenu

Klicken Sie nach dem Herunterladen auf Erweitern und aktivieren Sie das Modul. Es sind keine weiteren Abhängigkeiten erforderlich:

Schritt 2. Erstellen Sie das Menü

Klicken Sie auf Struktur > Menüs .
Suchen Sie nach der Hauptnavigation
Klicken Sie auf Menü bearbeiten .

Klicken Sie auf die Schaltfläche Link hinzufügen
Fügen Sie die Menüelemente der ersten Ebene hinzu:

Der Reiselink zeigt auf route:<nolink> . Dieses übergeordnete Element ist nur dazu da, andere Elemente zu enthalten:

Schritt 3. Konfigurieren Sie den Ultimenu-Block

Klicken Sie auf Struktur > Ultimenu .
Tab wählen Sie Hauptnavigation in den vertikalen Ultimenu-Blöcken
Klicken Sie auf Konfiguration speichern :

Klicken Sie auf Ultimenu-Regionen.
Wählen Sie Ultimenu:main: Reisen

Ultimenu erstellt diese Region dynamisch auf der Block-Layout -Seite, sodass Sie Blöcke darin platzieren können.

Klicken Sie auf Konfiguration speichern :

Die Registerkarte Ultimenu Goodies bietet zusätzliche Konfigurationsoptionen. Ich werde keine dieser Optionen überprüfen. Bitte lesen Sie die Dokumentation des Moduls, um zu verstehen, wie diese Optionen funktionieren, insbesondere wenn Sie eine mehrsprachige Website erstellen.

Schritt 4. Der Bildblock

Um ein Bild in einem Block zu platzieren, müssen Sie einen benutzerdefinierten Blocktyp mit dem Bildfeld erstellen.

Klicken Sie auf Struktur > Blocklayout > Benutzerdefinierte Blockbibliothek > Blocktypen .
Klicken Sie auf die Schaltfläche Benutzerdefinierten Blocktyp hinzufügen:

Geben Sie dem Blocktyp einen richtigen Namen.
Klicken Sie auf Speichern:

Klicken Sie auf Felder verwalten.
Löschen Sie das Feld „Text“.
Klicken Sie auf Feld hinzufügen.
Fügen Sie das Bildfeld hinzu .
Speichern Sie es mit den Standardeinstellungen.
Klicken Sie auf Anzeige verwalten.
Blenden Sie das Block- Label aus:

Klicken Sie auf Struktur > Blocklayout > Benutzerdefinierte Blockbibliothek > Benutzerdefinierten Block hinzufügen :

Klicken Sie auf Block mit Bild :

Laden Sie ein Bild hoch.
Klicken Sie auf Speichern:

Schritt #5. Die Links blockieren

Es gibt viele Möglichkeiten, einen Block mit Links in vier Spalten zu erhalten, zum Beispiel mit Views.

Ich arbeite in diesem Tutorial mit einem Bootstrap-Subtheme. Ich werde einen Basisblock mit Bootstrap-Markup und -Klassen verwenden.

Sehen Sie sich dieses Tutorial an, um zu erfahren, wie Sie ein Bootstrap-Subtheme in Drupal erstellen.

Klicken Sie erneut auf Benutzerdefinierten Block hinzufügen.
Wählen Sie diesmal Basisblock .
Geben Sie dem Block einen richtigen Namen.
Wählen Sie im Editor als Textformat Full HTML aus.
Klicken Sie auf die Schaltfläche Quelle .
Fügen Sie folgenden Code in das Editorfenster ein:

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

Klicken Sie auf Speichern.

fünfzehn

Schritt #6. Platziere den Ultimenu-Block

Klicken Sie auf Struktur > Blocklayout .
Deaktivieren Sie den standardmäßigen Hauptnavigationsblock .
Platzieren Sie Ultimenu: Hauptnavigation im Bereich Navigation (reduzierbar).
Deaktivieren Sie Titel anzeigen .
Klicken Sie auf Block speichern .

Schritt Nr. 7. Platziere die Blöcke im Bereich „Reisen“.

Scrollen Sie zum Ende der Seite.

Sie sehen die dynamisch generierte Region, die Sie bei der Konfiguration Ihres Ultimenu zugewiesen haben.

Klicken Sie auf Block platzieren:

Platzieren Sie den benutzerdefinierten Bildblock in dieser Region.
Deaktivieren Sie Titel anzeigen.
Klicken Sie auf Block speichern .
Wiederholen Sie den Vorgang mit dem Bootstrap-Markup -Block:

Ändern Sie bei Bedarf die Reihenfolge der Blöcke.
Klicken Sie auf Blöcke speichern :

Gehen Sie nun auf die Titelseite Ihrer Website und werfen Sie einen Blick auf das Menü. Ein paar CSS-Anpassungen sind erforderlich.

Schritt #8. Das CSS

Standardmäßig verweist die Bibliotheksdatei Ihres Unterdesigns auf die Datei style.css im css/-Ordner Ihres Bootstrap-Unterdesigns.

Fügen Sie dieser Datei den folgenden Code hinzu:

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

Inzwischen sollten Sie bereits bemerkt haben, wie Sie das Menü selbst anpassen können:

Zusammenfassung

Sie haben gerade gelernt, wie man Megamenüs in Drupal mit dem Ultimenu-Modul, Bootstrap und einem leicht verständlichen „Drupal-Block“-Ansatz erstellt.

Danke fürs Lesen!