So erstellen Sie ein zusammenklappbares verschachteltes Menü für Mobilgeräte mit Divis Theme Builder

Veröffentlicht: 2019-12-12

Vor einiger Zeit haben wir einen mobilen Menü-Hack geteilt, mit dem Sie ein zusammenklappbares verschachteltes Menü erstellen können. Wir wissen, dass viele von Ihnen es verwendet haben, aber mit dem neuen Divi Theme Builder wird der Ansatz etwas anders. Im heutigen Tutorial zeigen wir Ihnen, wie Sie im Divi Theme Builder einen mobilen Kollabierungseffekt auf das Menümodul anwenden. Dieses Tutorial besteht aus drei Hauptteilen:

Einrichten Ihres Menüs und Zuweisen der richtigen Klassen zu Ihren Menüpunkten
Erstellen Sie Ihr Menü mit dem Theme Builder und Menu Module
Hinzufügen des benutzerdefinierten Codes im Theme Builder

Sie können die JSON-Vorlagendatei auch kostenlos herunterladen! Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Handy, Mobiltelefon

verschachteltes Menü

Desktop

verschachteltes Menü

Laden Sie das globale Header-Design KOSTENLOS herunter

Wichtig: Nachdem Sie die JSON-Datei heruntergeladen und in Ihren Theme-Builder hochgeladen haben, müssen Sie Ihr Menü noch manuell mit den richtigen CSS-Klassen einrichten + das Code-Modul mit dem CSS- und JQuery-Code hinzufügen (Schritt 1 und 3 dieses Beitrags). .

Um das kostenlos zusammenklappbare verschachtelte Menü in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Abonnieren Sie unseren Youtube-Kanal

1. Richten Sie Ihr Menü ein

Menüelemente und Untermenüelemente hinzufügen

Als erstes müssen Sie Ihr Menü erstellen. Fügen Sie die Unterpunkte Ihrer Wahl hinzu.

verschachteltes Menü

CSS-Klassenoption hinzufügen

Nachdem Sie die Menüpunkte hinzugefügt haben, können Sie die Option CSS-Klassen aktivieren, indem Sie auf „Bildschirmoptionen“ klicken und „CSS-Klassen“ aktivieren.

verschachteltes Menü

CSS-Klasse zu Menüelementen der ersten Ebene hinzufügen, die Untermenüelemente enthalten

Fahren Sie fort, indem Sie eine CSS-Klasse zu den Menüelementen der ersten Ebene hinzufügen, die Untermenüelemente enthalten. In diesem Beispiel bedeutet dies, dass die CSS-Klasse zu den Menüpunkten 'Service' und 'Portfolio' hinzugefügt wird.

CSS-Klassen: erste Stufe

verschachteltes Menü

CSS-Klasse zu Menüelementen der zweiten Ebene hinzufügen und Menü speichern

Weisen Sie dann den Menüelementen der zweiten Ebene in Ihrem Menü eine andere CSS-Klasse zu. Stellen Sie sicher, dass Sie diese CSS-Klasse nur den Menüelementen der zweiten Ebene hinzufügen (falls Sie weitere Ebenen hinzufügen). Später in diesem Tutorial verwenden wir diese CSS-Klasse und diejenige, die wir den Menüelementen der ersten Ebene zugewiesen haben, um das verschachtelte verschachtelte Menü zu erstellen.

CSS-Klassen: zweite Stufe

verschachteltes Menü

2. Gehen Sie zu Divi Theme Builder und beginnen Sie mit dem Erstellen des globalen Headers

Gehe zum Divi Theme Builder

Der nächste Teil dieses Tutorials konzentriert sich auf das Erstellen des Header-Designs. Wenn Sie die verschachtelte Technik auf einen bereits erstellten Header anwenden möchten (mithilfe des Menümoduls), können Sie diesen Schritt überspringen und zum letzten Teil des Tutorials wechseln. Wenn Sie das Design neu erstellen möchten, befolgen Sie die Schritte weiter. Gehe zum Divi Theme Builder.

verschachteltes Menü

Beginnen Sie mit dem Erstellen eines globalen Headers

Beginnen Sie als Nächstes mit der Erstellung Ihres globalen Headers.

verschachteltes Menü

Abschnittseinstellungen

Abstand

Innerhalb des Vorlageneditors werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und entfernen Sie alle standardmäßigen oberen und unteren Polster.

Obere Polsterung: 0px
Untere Polsterung: 0px

verschachteltes Menü

Z-Index

Erhöhen Sie auch den z-Index des Abschnitts.

Z-Index: 99999

verschachteltes Menü

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

verschachteltes Menü

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Bildschirms einnehmen.

Benutzerdefinierte Dachrinnenbreite verwenden: Ja
Dachrinnenbreite: 1
Spaltenhöhen ausgleichen: Ja
Breite: 100%
Maximale Breite: 100%

verschachteltes Menü

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

Obere Polsterung: 0px
Untere Polsterung: 0px

verschachteltes Menü

Hauptelement

Stellen Sie sicher, dass alle Module auf kleineren Bildschirmgrößen nebeneinander angezeigt werden, indem Sie auch dem Hauptelement der Zeile eine einzelne Zeile CSS-Code hinzufügen.

display: flex;

verschachteltes Menü

Spalte 1

Abstand

Öffnen Sie dann die Einstellungen von Spalte 1 und fügen Sie benutzerdefinierte obere und untere Auffüllung hinzu.

Obere Polsterung: 20px
Untere Polsterung: 20px

verschachteltes Menü

Grenze

Fügen Sie auch einen Randradius hinzu.

Oben rechts: 100px
Unten rechts: 100px

verschachteltes Menü

Box Schatten

Und vervollständigen Sie die Einstellungen von Spalte 1, indem Sie einen subtilen Kastenschatten hinzufügen.

Horizontale Position des Kastenschattens: 20px
Stärke der Box-Schattenunschärfe: 50px
Schattenfarbe: rgba(0,0,0,0.15)

verschachteltes Menü

Spalte 2

Abstand

Öffnen Sie als nächstes die Einstellungen der zweiten Spalte und fügen Sie einige obere und untere Auffüllungen hinzu.

Obere Polsterung: 20px
Untere Polsterung: 20px

verschachteltes Menü

Spalte 3

Hintergrund mit Farbverlauf

Weiter zur nächsten und letzten Spalte. Fügen Sie einen Hintergrund mit Farbverlauf hinzu.

Farbe 1: #26c699
Farbe 2: #abe02f
Verlaufsrichtung: 116deg

verschachteltes Menü

Abstand

Fügen Sie als nächstes eine benutzerdefinierte obere und untere Polsterung hinzu.

Obere Polsterung: 20px
Untere Polsterung: 20px

verschachteltes Menü

Grenze

Gehen Sie dann zu den Rahmeneinstellungen und nehmen Sie die folgenden Änderungen vor:

Oben links: 100px
Unten links: 100px

verschachteltes Menü

Box Schatten

Vervollständigen Sie die Spalteneinstellungen, indem Sie einen Boxschatten hinzufügen.

Horizontale Position des Boxschattens: -26px
Vertikale Position des Boxschattens: 0px
Schattenfarbe: #d2ff0c

verschachteltes Menü

Bildmodul zu Spalte 1 hinzufügen

Logo hochladen

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Bildmodul in Spalte 1. Laden Sie Ihr Logo hoch.

verschachteltes Menü

Ausrichtung

Ändern Sie als nächstes die Bildausrichtung des Moduls.

Bildausrichtung: Mitte

verschachteltes Menü

Größe

Vervollständigen Sie die Einstellungen des Moduls, indem Sie die Breite über verschiedene Bildschirmgrößen ändern.

Breite: 120px (Desktop), 80px (Tablet & Telefon)

verschachteltes Menü

Menümodul zu Spalte 2 hinzufügen

Menü auswählen

In Spalte 2 benötigen wir als einziges Modul ein Menümodul. Wählen Sie das Menü aus, das Sie im ersten Teil dieses Tutorials erstellt haben.

verschachteltes Menü

Hintergrundfarbe entfernen

Entfernen Sie als nächstes die Hintergrundfarbe des Moduls.

verschachteltes Menü

Layout

Ändern Sie dann die Layouteinstellungen.

Stil: Zentriert
Richtung des Dropdown-Menüs: Abwärts

verschachteltes Menü

Menütext

Gestalten Sie auch den Menütext.

Menüschrift: Montserrat
Schriftstärke des Menüs: Mittel
Menütextfarbe: #000000
Menütextgröße: 13px
Menübuchstabenabstand: 1px

verschachteltes Menü

Dropdown-Menü

Fahren Sie fort, indem Sie einige Farben in den Dropdown-Menüeinstellungen ändern.

Hintergrundfarbe des Dropdown-Menüs: #ffffff
Farbe der Dropdown-Menüzeile: #000000

verschachteltes Menü

Symbole

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie die Farbe des Hamburger-Menüsymbols in den Symboleinstellungen ändern.

Hamburger Menüsymbol Farbe: #000000

verschachteltes Menü

Textmodul zu Spalte 3 hinzufügen

Inhalt hinzufügen

Weiter zum nächsten und letzten Modul, das ein Textmodul in Spalte 3 ist. Fügen Sie eine Kopie Ihrer Wahl hinzu.

verschachteltes Menü

Link hinzufügen

Fügen Sie als nächstes einen Link zum Modul hinzu.

Modul-Link-URL: #

verschachteltes Menü

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

Textschriftart: Montserrat
Schriftstärke des Textes: Halbfett
Textfarbe: #ffffff
Textgröße: 16px
Textzeilenhöhe: 1em
Textausrichtung: Mitte

verschachteltes Menü

Abstand

Vervollständigen Sie die Einstellungen des Moduls, indem Sie etwas topmargin hinzufügen.

Oberer Rand: 10px

verschachteltes Menü

3. Hinzufügen von Funktionen zum Menü mithilfe eines Codemoduls

Codemodul zu Spalte 2 hinzufügen

Sobald Sie das Design Ihrer Kopfzeile abgeschlossen haben, ist es an der Zeit, den benutzerdefinierten Code hinzuzufügen, der das mobile Menü in ein zusammenklappbares verschachteltes Menü verwandelt. Fügen Sie der zweiten Spalte (oder anderswo) ein Codemodul hinzu.

verschachteltes Menü

CSS- und JQuery-Code einfügen

Fügen Sie dann den CSS- und JQuery-Code hinzu. Stellen Sie sicher, dass Sie den CSS-Code zwischen style-Tags und den JQuery-Code zwischen script-Tags platzieren.

.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}

(function($) {
      
function setup_collapsible_submenus() {
    
var FirstLevel = $('.et_mobile_menu .first-level > a');
  
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');  
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
  

}
      
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
 
})(jQuery);

verschachteltes Menü

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Handy, Mobiltelefon

verschachteltes Menü

Desktop

verschachteltes Menü

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie ein verschachteltes verschachteltes Menü auf Ihren globalen Header im Theme Builder anwenden können. Wir begannen mit der Erstellung der primären Menüleiste, fuhren mit dem Entwerfen unserer Kopfzeile im Theme Builder mit dem Menümodul fort und beendeten das Tutorial, indem wir den benutzerdefinierten Code hinzugefügt haben, der den Effekt funktioniert. Wir hoffen, dass Ihnen dieses Tutorial gefallen hat und wenn Sie Fragen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.