So erstellen Sie ein Slide-Down-Push-Menü in Divi

Veröffentlicht: 2020-07-22

Große Kopfzeilen mit vielen Navigationslinks können viel wertvollen Platz auf Ihrer Website beanspruchen (insbesondere über dem Falz). Aus diesem Grund werden Popup- und Slide-In-Menüs immer beliebter. Meistens bleiben Menüs, die zur Ansicht eingeschoben werden, über dem Inhalt der Seite und verstecken bestimmte Elemente. Ein Schiebemenü funktioniert jedoch etwas anders. Der Schiebe-Push-Effekt ist insofern einzigartig, als das Menü vom oberen Rand der Seite eingeschoben wird, während gleichzeitig der Seiteninhalt nach unten gedrückt wird, sodass nichts verborgen bleibt.

In diesem Tutorial zeigen wir Ihnen, wie Sie mit dem Divi Theme Builder ein Schiebemenü von Grund auf neu erstellen. Sobald das Menü erstellt ist, wird es zu einem vielseitigen Werkzeug für alle Arten von Anwendungen, da Sie den Abschnitt mit dem Divi Builder mit jedem gewünschten Inhalt füllen können.

Lasst uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Schiebemenü, das wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial 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!

Um das Abschnittslayout in Ihren Divi Theme Builder zu importieren, navigieren Sie zum Divi Theme Builder.

Klicken Sie auf das Portabilitätssymbol.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird die Abschnittsvorlage im Divi Theme Builder angezeigt.

divi-sliding-push-menu

Kommen wir zum Tutorial, ja?

Erstellen des Schiebemenüs mit dem Divi Theme Builder

Erstellen eines neuen globalen Menüs

Um das Menü zu erstellen, erstellen wir einen neuen globalen Header im Divi Theme Builder.

Navigieren Sie zu Divi > Theme Builder.

Klicken Sie dann innerhalb der Standard-Website-Vorlage auf den Bereich „Globalen Header hinzufügen“. Wählen Sie in der Dropdown-Liste „Globalen Header erstellen“ aus.

divi-sliding-push-menu

Dadurch gelangen Sie zum globalen Header-Layout-Editor.

Wenn Sie sich im Global Header Layout Editor befinden, wählen Sie die Option „Build From Scratch.

divi-sliding-push-menu

Erstellen des Push-Menüs

Das erste Element, das wir zusammen bauen werden, ist der Push-Menü-Bereich. Dieser Abschnitt enthält die Menüelemente, die beim Klicken auf die Schaltfläche zum Umschalten des Menüs nach unten und oben umgeschaltet werden.

Abschnittseinstellungen

Öffnen Sie die Einstellungen des Standardbereichs und aktualisieren Sie die Einstellungen wie folgt:

Hintergrund

Hintergrundfarbe: #1a1e36

divi-sliding-push-menu

Polsterung

Padding: 0px oben, 0px unten

divi-sliding-push-menu

CSS-Klasse

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse hinzu, die später in unserem JS-Code verwendet wird.

CSS-Klasse: et-push-menu

divi-sliding-push-menu

Benutzerdefiniertes CSS (Tablet)

Als Nächstes müssen wir die Höhe des Abschnitts auf dem Handy mithilfe einer berechneten Höhe anpassen, um die hinzuzufügende Hauptheaderleiste aufzunehmen. Dadurch erstreckt sich der Abschnitt im Wesentlichen über die gesamte Höhe des Fensters auf dem Handy, wenn der Benutzer das Menü öffnet.

Fügen Sie dem Hauptelement nur auf dem Tablet das folgende benutzerdefinierte CSS hinzu:

height: calc(100vh - 70px);
overflow:scroll !important;
overscroll-behavior: contain;

divi-sliding-push-menu

Zeile 1 hinzufügen

Sobald die Abschnittseinstellungen abgeschlossen sind, erstellen Sie eine einspaltige Zeile innerhalb des Abschnitts.

divi-sliding-push-menu

Zeile 1 Einstellungen

Aktualisieren Sie dann die Zeileneinstellungen wie folgt:

Entwurf

Dachrinnenbreite: 1
Breite: 100%
Maximale Breite: 1280px
Polsterung: 3Vh oben, 3Vh unten
Breite des unteren Rands: 1px
Farbe des unteren Rands: rgba(255,255,255,0.2)

divi-sliding-push-menu

Benutzerdefinierte CSS

Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

Unter Desktop…

display:flex;
justify-content:center;
align-items:center;

Unter Tablet…

display:flex;
flex-direction:column;
align-items:center;

divi-sliding-push-menu

Spalteneinstellungen

Nachdem die Zeileneinstellungen vorgenommen wurden, öffnen Sie die Einstellungen für die Spalte und fügen Sie dem Hauptelement ein benutzerdefiniertes CSS-Snippet hinzu:

display:flex;
align-items:center;
justify-content:center;

Dadurch wird der Inhalt der Spalte sowohl vertikal als auch horizontal zentriert.

divi-sliding-push-menu

Schaltfläche hinzufügen

Jetzt können wir mit dem Hinzufügen unserer Menüpunkte mit Schaltflächenmodulen beginnen. Beginnen Sie, indem Sie der Spalte eine neue Schaltfläche hinzufügen.

divi-sliding-push-menu

Tasteneinstellungen

Aktualisieren Sie dann die Schaltflächeneinstellungen wie folgt:

Inhalt

Schaltflächentext: Design
Schaltflächen-Link-URL: # (ersetzen Sie diese später durch Ihre eigene benutzerdefinierte URL)

divi-sliding-push-menu

Entwurf

Schaltflächentextfarbe: #ffffff
Breite des Tastenrahmens: 0px
Button-Schriftart: Montserrat
Tastenschriftgewicht: Schwer
Schaltflächensymbol: [Ihre Wahl]
Platzierung der Schaltflächensymbole: Links

divi-sliding-push-menu

Duplizieren der Spalte

Um nun die zusätzlichen Schaltflächen für das Menü zu erstellen, können wir die Spalte duplizieren. Lassen Sie uns für dieses Design die Spalte viermal duplizieren, um insgesamt 5 Menüpunkte / Schaltflächen zu erhalten. in einer fünfspaltigen Reihe.

divi-sliding-push-menu

Zeile 2 hinzufügen

Sobald die erste Reihe fertig ist, können wir eine weitere Reihe von Schaltflächen hinzufügen, die für andere Menüelemente verwendet werden können.

Um die nächste Zeile zu erstellen, duplizieren Sie Zeile 1.

divi-sliding-push-menu

Alle Spalten außer einer löschen

Löschen Sie dann alle Spalten bis auf eine innerhalb der doppelten Zeile.

divi-sliding-push-menu

Zeile 2 Einstellungen

Aktualisieren Sie die Einstellungen für Zeile 2 wie folgt:

Maximale Breite: 1080px
Breite des unteren Rands: 0px

divi-sliding-push-menu

Spalteneinstellungen

Fügen Sie dann wie folgt einen Rahmen zur Spalte hinzu:

Breite des rechten Rands: 1px
Farbe des rechten Rands: rgba(255,255,255,0.2)

divi-sliding-push-menu

Schaltflächeneinstellungen aktualisieren

Nachdem die Spalte den rechten Rand hat, öffnen Sie die Einstellungen für die Schaltfläche und aktualisieren Sie Folgendes:

Schaltflächentextgröße: 14px
Tastenabstand der Buchstaben: 2px
Tastenschriftstärke: Halbfett
Schaltflächenschriftart: TT
Schaltflächensymbol anzeigen: NEIN

divi-sliding-push-menu

Duplizieren Sie die Spalte

Lassen Sie uns wie zuvor die Spalte duplizieren, um zusätzliche Schaltflächen und Spalten zu erstellen. Lassen Sie uns für dieses Design die Spalte dreimal duplizieren, um insgesamt 4 Schaltflächen in einer 4-Spalten-Reihe zu erhalten.

divi-sliding-push-menu

Löschen des letzten Spaltenrahmens

Da die letzte Spalte nicht den richtigen Rahmen haben soll, öffnen Sie die Einstellungen für Spalte 4 und aktualisieren Sie die Rahmenbreite:

Breite des rechten Rands: 0px

divi-sliding-push-menu

Erstellen der Hauptkopfzeilenleiste

Als Nächstes erstellen wir den Abschnitt für die Hauptheaderleiste. Diese Kopfzeile bleibt immer sichtbar und enthält unser Site-Logo, einen CTA und unseren Menü-Umschaltknopf.

Abschnitt hinzufügen

Bevor wir den neuen Abschnitt hinzufügen, ist es eine gute Idee, das Label des vorherigen Abschnitts zu aktualisieren, um „Push Menu Section“ zu lesen.

Erstellen Sie dann unterhalb des ersten Abschnitts einen neuen Abschnitt.

divi-sliding-push-menu

Abschnittseinstellungen

Aktualisieren Sie nun das Etikett des neuen Abschnitts, um "Header-Abschnitt" zu lesen. Öffnen Sie dann die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Polsterung

Padding: 0px oben, 0px unten

divi-sliding-push-menu

Zeile hinzufügen

Nachdem die Abschnittsauffüllung hinzugefügt wurde, fügen Sie dem Abschnitt eine dreispaltige Zeile hinzu.

divi-sliding-push-menu

Zeileneinstellungen

Öffnen Sie die Zeileneinstellung und aktualisieren Sie Folgendes:

Größe

Dachrinnenbreite: 1
Breite: 90%
Höhe: 70px

divi-sliding-push-menu

Polsterung

Padding: Padding: 0px oben, 0px unten

divi-sliding-push-menu

Benutzerdefinierte CSS

Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

display:flex;
align-items:center;

Dadurch werden die Spalten innerhalb der Zeile vertikal zentriert.

divi-sliding-push-menu

Schaltfläche hinzufügen

Um den Haupt-CTA im Kopfbereich zu erstellen, können wir eine Schaltfläche aus der zweiten Reihe im oberen Bereich verwenden. Kopieren Sie die Schaltfläche aus Spalte 1 in Zeile 2 des oberen Abschnitts und fügen Sie sie in Spalte 1 der Zeile im Kopfabschnitt ein.

divi-sliding-push-menu

Schaltflächeneinstellungen aktualisieren

Öffnen Sie dann die Schaltflächeneinstellungen für die duplizierte Schaltfläche und aktualisieren Sie Folgendes:

Schaltflächentext: Anmelden
Schaltflächentextgröße: 14px
Schaltflächentextfarbe: #1a1e36
Schaltflächensymbol anzeigen: JA
Schaltflächensymbol: Pfeil nach rechts (siehe Screenshot)

divi-sliding-push-menu

Logo hinzufügen

Fügen Sie in der mittleren Spalte ein Bildmodul hinzu. Auf diese Weise fügen wir das Website-Logo dynamisch hinzu.

divi-sliding-push-menu

Bewegen Sie den Mauszeiger über das Bildfeld und klicken Sie auf das Symbol „Dynamische Inhalte verwenden“. Wählen Sie in der Dropdown-Liste „Site-Logo“ aus.

divi-sliding-push-menu

Bildeinstellungen

Aktualisieren Sie dann auf der Registerkarte "Design" Folgendes:

Bildausrichtung: Mitte
Maximale Höhe: 55px

divi-sliding-push-menu

Benutzerdefiniertes Hamburger-Symbol hinzufügen

Wir könnten ein normales Symbol über ein Klappenmodul als Menüumschalter verwenden, aber für dieses Tutorial dachte ich, wir würden einen benutzerdefinierten Menüumschalter mit einem coolen Übergangseffekt hinzufügen.

Textmodul hinzufügen

Um das Menüsymbol zu erstellen, verwenden wir ein Textmodul mit benutzerdefiniertem HTML, das mit externem CSS gestaltet wird.

Fahren Sie fort und fügen Sie in Spalte 3 ein Textmodul hinzu.

divi-sliding-push-menu

Textmodul-HTML hinzufügen

Fügen Sie dann den folgenden HTML-Code zum Inhalt des Textbausteins hinzu:

<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>

divi-sliding-push-menu

Hintergrund

Geben Sie dem Textbaustein eine Hintergrundfarbe:

Hintergrundfarbe: #1a1e36

divi-sliding-push-menu

Textdesign

Aktualisieren Sie dann die Designeinstellungen wie folgt:

Breite: 70px
Modulausrichtung: rechts
Höhe: 70px
Padding: 20px oben, 20px unten, 16px links, 16px rechts

divi-sliding-push-menu

CSS-Klasse

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse hinzu:

CSS-Klasse: et-push-menu-toggle

divi-sliding-push-menu

Code hinzufügen

Um die Funktionalität, die wir für das Funktionieren dieses Schiebemenüs benötigen, nach Hause zu bringen, fügen wir unser benutzerdefiniertes CSS und jQuery zu einem Codemodul hinzu.

Fahren Sie fort und fügen Sie in Spalte 3 unter dem Textmodul ein Codemodul hinzu.

divi-sliding-push-menu

Fügen Sie dann den folgenden Code ein (wichtig: Wickeln Sie diesen Code in Style-Tags ein, damit er korrekt funktioniert):

  .line {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #ffffff;
    opacity: 1;
    -webkit-transition: .1s ease-in-out;
    -moz-transition: .1s ease-in-out;
    -o-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
  }
  .line-2 {
    top: 10px;
  }
  .line-3 {
    top: 20px;
  }
  .et-push-menu-toggle.open .line-1 {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .et-push-menu-toggle.open .line-2 {
    display: none;
  }
  .et-push-menu-toggle.open .line-3 {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .et-push-menu {
    display:none;
  }
  .et-fb .et-push-menu {
    display:block;
  }
  .et-push-menu-toggle {
    cursor:pointer;
  }

Kopieren Sie als Nächstes diesen Code und fügen Sie ihn direkt darunter ein (wichtig: Wickeln Sie diesen Code in Skript-Tags ein, damit er richtig funktioniert):

(function($) {
  $(document).ready(function(){
    $('.et-push-menu-toggle').click(function(){
      $(this).toggleClass('open');
      $('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
    });
  });  
})( jQuery );

divi-sliding-push-menu

Schaltflächentext und Links aktualisieren

Schließlich können wir alle Schaltflächen mit den erforderlichen Schaltflächentexten und Link-URLs aktualisieren.

divi-sliding-push-menu

Das ist es!

Einstellungen speichern

Vergessen Sie nicht, das Layout und die Theme-Builder-Einstellungen zu speichern.

divi-sliding-push-menu

Endergebnis

Um das Endergebnis anzuzeigen, besuchen Sie eine Live-Seite auf Ihrer Website.

Klebrig machen

Wenn Sie eine „klebrige“ Version des Menüs wünschen, müssen Sie nur den folgenden CSS-Schnipsel zum Codemodul hinzufügen (zwischen den Style- Tags):

  header {
    position: sticky;
    top:0;
    z-index:9999;
  }
  #page-container {
    overflow-y: visible !important;
  }

Und hier ist das Ergebnis.

Abschließende Gedanken

Ich hoffe, Sie genießen dieses Schiebemenü. Der Effekt ist einzigartig und öffnet die Tür für weitere kreative Köpfe.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!