Möchten Sie erstellen ein Schiebe- und Push-Menü in DIVI die keine Elemente Ihrer Seite verbirgt?
Große Kopfzeilen mit vielen Navigationslinks können wertvollen Platz auf Ihrer Seite einnehmen Website. Aus diesem Grund erfreuen sich Kontext- und Slide-out-Menüs immer größerer Beliebtheit. Meistens bleiben Menüs, die zur Anzeige verschoben werden, über dem Inhalt der Seite, wodurch bestimmte Elemente ausgeblendet werden.
Ein Schiebe-Push-Menü funktioniert jedoch etwas anders. Der Sliding-Push-Effekt ist insofern einzigartig, als das Menü vom oberen Rand der Seite eingeschoben wird, während gleichzeitig auf gedrückt wird Inhalt von der Seite nach unten, sodass nichts verborgen bleibt.
In diesem Tutorial zeigen wir Ihnen, wie Sie mit Divi Theme Builder ein Schiebemenü von Grund auf neu erstellen.
Lassen Sie uns gehen!
Übersicht
Hier ist ein kurzer Blick auf das verschiebbare Push-Menü, das wir in diesem Tutorial erstellen werden.
Erstellen Sie das verschiebbare Push-Menü mit dem Divi-Designersteller
Erstellen eines neuen globalen Menüs
Um das Menü zu erstellen, erstellen wir eine neue globale Kopfzeile im Divi Theme Builder.
Gehen Sie zu Divi > Theme Builder.
Lesen Sie auch: So erstellen Sie einen globalen Header mit Anmeldeformular in DIVI
Klicken Sie dann in der auf den Bereich "Einen globalen Header hinzufügen". Website-Vorlage standardmäßig. Wählen Sie in der Dropdown-Liste „Globalen Header erstellen“ aus.
Erstellung des Push-Menüs
Das erste Element, das wir zusammen bauen werden, ist der Push-Menü-Abschnitt. Dieser Abschnitt enthält die Menüelemente, die nach oben und unten umgeschaltet werden, wenn Sie auf die Schaltfläche zum Umschalten des Menüs klicken.
Abschnittseinstellungen
Öffnen Sie die Standardbereichseinstellungen und aktualisieren Sie die Einstellungen wie folgt:
Hintergrund
- Hintergrund: #1a1e36
Interne Marge
- Interner Rand: 0 Pixel oben, 0 Pixel unten
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
Fügen Sie die 1-Zeile hinzu
Sobald die Abschnittsparameter definiert sind, erstellen Sie eine einspaltige Zeile im Abschnitt.
Zeile 1 Parameter
Als nächstes aktualisieren Sie die Linienparameter wie folgt:
Sizing
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Spaltenabstand: 1
- Maximale Breite: 100%
- Maximale Breite: 1 Pixel
Abstand
- Rand: Top 3vh, Bottom 3vh
Grenze
- Breite des unteren Randes: 1px
- Farbe des unteren Randes: rgba(255,255,255,0.2)
Benutzerdefiniertes CSS
Fügen Sie auf der Registerkarte Erweitert dem Hauptelement das folgende benutzerdefinierte CSS hinzu:
display:flex;
justify-content:center;
align-items:center;
Spaltenparameter
Sobald die Zeileneinstellungen definiert sind, öffnen Sie die Spalteneinstellungen und fügen Sie dem Hauptelement ein benutzerdefiniertes CSS-Snippet hinzu:
display:flex;
align-items:center;
justify-content:center;Dadurch wird das zentriert Inhalt der Säule sowohl vertikal als auch horizontal.
Fügen Sie eine Schaltfläche
Wir können jetzt damit beginnen, unsere Menüelemente mit dem Button-Modul hinzuzufügen. Beginnen Sie, indem Sie der Spalte eine neue Schaltfläche hinzufügen.
Siehe auch unseren Leitfaden zu: So erstellen Sie ein vertikales Navigationsmenü in DIVI
Tasteneinstellungen
Aktualisieren Sie als Nächstes die Schaltflächeneinstellungen wie folgt:
Inhalt
- Schaltflächentext: Design
- Schaltflächen-Link-URL: # (später durch Ihre eigene benutzerdefinierte URL ersetzen)
Design
- Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: JA
- Textfarbe der Schaltfläche: #ffffff
- Rahmenbreite der Schaltfläche: 0 Pixel
- Button Schriftart: Montserrat
- Weiche Lichttaste: Schwer
- Icon-Taste: JA
- Symbolschaltfläche: [Ihre Wahl]
- Symbol nur auf Hover-Schaltfläche anzeigen: NEIN
- Platzierung des Schaltflächensymbols: Links
Spalte duplizieren
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 fünf Menüelemente/Schaltflächen in einer Reihe von fünf Spalten zu erhalten.
Fügen Sie die 2-Zeile hinzu
Sobald die erste Reihe fertig ist, können wir eine weitere Reihe von Schaltflächen hinzufügen, die für einen anderen Satz von Menüelementen verwendet werden können.
Lesen Sie auch: So fügen Sie ein Kontaktformular zu einer globalen Kopfzeile in DIVI hinzu
Um die nächste Zeile zu erstellen, duplizieren Sie Zeile 1.
Löschen Sie alle Spalten bis auf eine
Löschen Sie dann alle bis auf eine Spalte in der doppelten Zeile.
Zeile 2 Parameter
Aktualisieren Sie die Parameter von Zeile 2 wie folgt:
- Maximale Breite: 1 Pixel
- Breite des unteren Randes: 0px
Spaltenparameter
Fügen Sie dann wie folgt einen Rahmen zur Spalte hinzu:
- Rechte Randbreite: 1px
- Farbe rechter Rand: rgba(255,255,255,0.2)
Schaltflächeneinstellungen aktualisieren
Sobald die Spalte den rechten Rand hat, öffnen Sie die Schaltflächeneinstellungen und aktualisieren Sie Folgendes:
- Schaltflächentextgröße: 14px
- Soft Light-Taste: fetter Text
- Buchstabenabstand der Schaltfläche: 2 px
- Schaltflächenkopierstil: TT
- Icon-Taste: NEIN
Spalte duplizieren
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 3 Schaltflächen in einer Reihe von 4 Spalten zu erhalten.
Rand der letzten Spalte entfernen
Da wir nicht möchten, dass die letzte Spalte den rechten Rand hat, öffnen Sie die Einstellungen für Spalte 4 und aktualisieren Sie die Randbreite:
- Rechte Randbreite: 0px
Erstellen der Hauptkopfleiste
Als Nächstes erstellen wir den Hauptkopfleistenabschnitt. Diese Kopfleiste bleibt immer sichtbar und enthält unser Website-Logo, einen Aufruf zum Handeln und unsere Schaltfläche zum Umschalten des Menüs.
Fügen Sie einen Abschnitt hinzu
Bevor Sie den neuen Abschnitt hinzufügen, ist es eine gute Idee, die Bezeichnung des vorherigen Abschnitts so zu aktualisieren, dass sie „Push-Menüabschnitt“ lautet.
Siehe auch: So erstellen Sie einen globalen Header mit Theme Builder in DIVI
Erstellen Sie dann einen neuen Abschnitt unterhalb des ersten Abschnitts.
Abschnittseinstellungen
Aktualisieren Sie nun die Bezeichnung des neuen Abschnitts auf „Kopfzeilenabschnitt“. Öffnen Sie dann die Abschnittseinstellungen und aktualisieren Sie Folgendes:
Abstand
- Interner Rand: 0 Pixel oben, 0 Pixel unten
Fügen Sie eine Zeile hinzu
Sobald die Abschnittsfüllung festgelegt ist, fügen Sie dem Abschnitt eine dreispaltige Zeile hinzu.
Leitungseinstellungen
Öffnen Sie den Zeilenparameter und aktualisieren Sie Folgendes:
Sizing
- Dachrinnenbreite: 1
- Breite: 90%
- Höhe: 70px
Abstand
- Interner Rand: 0 Pixel oben, 0 Pixel unten
Benutzerdefiniertes CSS
Fügen Sie auf der Registerkarte Erweitert dem Hauptelement das folgende benutzerdefinierte CSS hinzu:
display:flex;
align-items:center;Dadurch werden die Spalten in der Zeile vertikal zentriert.
Fügen Sie eine Schaltfläche
Um den Haupt-CTA im Header-Bereich zu erstellen, können wir eine Schaltfläche in der zweiten Reihe im oberen Bereich verwenden. Kopieren Sie die Schaltfläche aus Spalte 1 der Zeile 2 des oberen Abschnitts und fügen Sie sie in Spalte 1 der Zeile des Kopfabschnitts ein.
Schaltflächeneinstellungen aktualisieren
Öffnen Sie dann die Einstellungen für doppelte Schaltflächen und aktualisieren Sie Folgendes:
- Schaltflächentext: Registrierung
- Schaltflächentextgröße: 14px
- Textfarbe der Schaltfläche: #1a1e36
- Icon-Taste: JA
- Symbolschaltfläche: Rechtspfeil (siehe Screenshot)
Fügen Sie ein Logo hinzu
Fügen Sie in der mittleren Spalte ein Bildmodul hinzu. Auf diese Weise fügen wir das Website-Logo dynamisch hinzu.
Bewegen Sie den Mauszeiger über den Bildbereich und klicken Sie auf das Symbol „Dynamische Inhalte verwenden“. Wählen Sie aus dem Dropdown-Menü „Website-Logo“ aus.
Bildeinstellungen
Aktualisieren Sie dann auf der Registerkarte Stil Folgendes:
- Bildausrichtung: zentriert
- Maximale Höhe: 55 Pixel
Fügen Sie ein benutzerdefiniertes Hamburger-Symbol hinzu
Wir könnten ein normales Symbol über ein Layoutmodul als Menüumschalter verwenden, aber für dieses Tutorial dachte ich, wir würden einen benutzerdefinierten Menüumschalter mit einem coolen Übergangseffekt hinzufügen.
Fügen Sie ein Textmodul hinzu
Um das Menüsymbol zu erstellen, verwenden wir ein Textmodul mit benutzerdefiniertem HTML-Code, der mit externem CSS gestaltet wird.
Fahren Sie fort und fügen Sie Spalte 3 einen Textbaustein hinzu.
HTML-Code zum Textmodul 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>
Hintergrund
Geben Sie dem Textbaustein eine Hintergrundfarbe:
- Hintergrundfarbe: #1a1e36
Formatieren Sie den Text
Aktualisieren Sie als Nächstes die Stileinstellungen wie folgt:
- Breite: 70 Pixel
- Modulausrichtung: rechts
- Höhe: 70px
- Interner Rand: 20 Pixel oben, 20 Pixel unten, 16 Pixel links, 16 Pixel rechts
CSS-Klasse
Fügen Sie auf der Registerkarte „Erweitert“ die folgende CSS-Klasse hinzu:
- CSS-Klasse: et-push-menu-toggle
Code hinzufügen
Um die Funktionalität nach Hause zu bringen, die wir benötigen, damit dieses verschiebbare Push-Menü funktioniert, fügen wir unser benutzerdefiniertes CSS und jQuery zu einem Code-Modul hinzu.
Fahren Sie fort und fügen Sie ein Code-Modul in Spalte 3 unter dem Text-Modul hinzu.
Fügen Sie dann den folgenden Code ein (Hinweis: Verpacken Sie diesen Code in Tags Stil damit es richtig 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 dann diesen Code und fügen Sie ihn direkt darunter ein (wichtig: Fügen Sie diesen Code in Skript-Tags ein, damit er ordnungsgemäß 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 );
Schaltflächentext und Links aktualisieren
Schließlich können wir alle Schaltflächen mit dem erforderlichen Schaltflächentext und den Link-URLs aktualisieren.
Es ist vollbracht !
Einstellungen speichern
Vergessen Sie nicht, das Layout und die Einstellungen des Theme Builders zu speichern.
Endergebnis
Um das Endergebnis zu sehen, überprüfen Sie die Seite auf Ihrem Webseite.
Verkleben
Wenn Sie eine "klebrige" Version des Menüs wünschen, fügen Sie einfach das folgende CSS-Code-Snippet zum Codemodul hinzu (zwischen den Style-Tags):
header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
overflow-y: visible !important;
}
Hier ist das Ergebnis.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Wir hoffen, dass Ihnen dieses verschiebbare Push-Menü gefällt. Der Effekt ist einzigartig und öffnet die Tür zu kreativeren Kopfzeilen. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
