So erstellen Sie mit Divi . ein expandierendes Sticky-Menü beim Hover

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben.

Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie mit Divis Mechanic Layout Pack ein expandierendes Sticky-Menü beim Hover erstellen. Wir behandeln zwei verschiedene Designbeispiele, die Sie von Grund auf neu erstellen und auf jede Art von Website anwenden können, die Sie erstellen! Das Menü wird auf Desktop-Bildschirmgrößen per Mauszeiger angezeigt und auf mobilen Geräten durch Klicken aktiviert.

Lasst uns anfangen!

Vorschau

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

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Allgemeine Schritte

Feste Navigation deaktivieren

Gehen Sie zu Divi-Theme-Optionen

Wir beginnen mit einigen allgemeinen Schritten. Diese Schritte sind für beide Beispiele gleich und notwendig, um das gewünschte Ergebnis zu erzielen.

Wenn Sie am unteren Rand Ihrer Seite ein expandierendes Sticky-Menü verwenden möchten, können Sie die primäre Menüleiste oben weglassen. Um dies zu tun, müssen Sie zu den Themenoptionen von Divi gehen.

Feste Navigation deaktivieren

Dort sollten Sie die Option für die feste Navigationsleiste deaktivieren, um sicherzustellen, dass oben auf Ihrer Seite kein Platz verbleibt.

• Feste Navigationsleiste: Deaktiviert

Primäre Menüleiste auf Seite ausblenden

Seiteneinstellungen öffnen

Wechseln Sie zu der Seite, zu der Sie das expandierende Sticky-Menü hinzufügen möchten, und öffnen Sie die Seiteneinstellungen.

Benutzerdefiniertes CSS hinzufügen

Blenden Sie das Hauptmenü aus, indem Sie Ihrer Seite die folgenden CSS-Codezeilen hinzufügen.

#main-header {
display: none;
}

Neuen Abschnitt am Ende der Seite hinzufügen

Unabhängig davon, welches Beispiel Sie neu erstellen möchten, bleiben einige der grundlegenden Schritte gleich. Der erste Schritt besteht darin, unten auf der Seite einen regulären Abschnitt hinzuzufügen.

Abstand

Öffnen Sie die Abschnittseinstellungen und entfernen Sie alle benutzerdefinierten oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

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

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

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

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Hauptelement

Wir erlauben der gesamten Zeile, am unteren Rand unserer Seite zu bleiben, indem wir dem Hauptelement der Zeile zwei einzelne Zeilen CSS-Code hinzufügen.

bottom: 0px;
position: fixed;

Z-Index

Und wir stellen sicher, dass die Zeile (und das Textmodul, das wir in den nächsten Schritten hinzufügen) über allen Seiteninhalten bleibt, indem wir den Z-Index in den Sichtbarkeitseinstellungen der Zeile erhöhen.

• Z-Index: 99

Codemodul zur Spalte hinzufügen

CSS-Code zwischen Style-Tags hinzufügen

Der letzte Teil der allgemeinen Schritte ist das Hinzufügen eines Codemoduls zur neuen Zeile. Der CSS-Code, den wir in diesem Codemodul hinzufügen, hilft uns, den aufschlussreichen Effekt beim Schweben zu erzielen. Fügen Sie die folgenden CSS-Codezeilen in das Modul ein:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

Beispiel 1 neu erstellen

Textmodul zur Spalte hinzufügen

Inhalt hinzufügen

Nachdem wir nun alle Schritte durchlaufen haben, können wir uns auf die zwei verschiedenen Designbeispiele konzentrieren, beginnend mit dem ersten! Fügen Sie der Spalte Ihrer Zeile ein Textmodul hinzu. Im Inhaltsfeld verwenden wir den Absatzstil, um die Kopie des '≡ Menü' anzuzeigen. Wir platzieren dann alle Menüpunkte in einer ungeordneten Liste. Wir werden auch einzeln einen Link zu jedem der Seitentitel hinzufügen.

Standardhintergrundfarbe

Gehen Sie zu den Hintergrundeinstellungen des Moduls und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Hintergrundfarbe schweben

Ändern Sie diese Hintergrundfarbe beim Bewegen des Mauszeigers.

• Hintergrundfarbe: rgba(255,255,255,0,83)

Hintergrund mit Farbverlauf

Und fügen Sie auch einen Standardverlaufshintergrund hinzu.

• Farbe 1: rgba(255,255,255,0)
• Farbe 2: #ffffff
• Endposition: 60%

Standardtexteinstellungen

Fahren Sie fort, indem Sie zur Registerkarte Design gehen und die Texteinstellungen ändern.

• Textschriftart: Khand
• Schriftstärke des Textes: Fett
• Textfarbe: #021827
• Textgröße: 3vh
• Textausrichtung: Mitte

Hover-Texteinstellungen

Ändern Sie einige der Texteinstellungen beim Bewegen des Mauszeigers.

• Textfarbe: rgba(255,255,255,0)
• Textgröße: 0vh

Linktext-Einstellungen

Gehen Sie dann zu den Linktexteinstellungen und ändern Sie die Linktextfarbe.

• Linktextfarbe: #000000

Standardeinstellungen für Listentext

Gehen Sie zu den Standardeinstellungen für den Listentext und gestalten Sie ihn nach Belieben. Stellen Sie sicher, dass Sie '0px' für die Textgröße im Standardzustand verwenden.

• Schriftart für ungeordnete Liste: Khand
• Schriftstil für ungeordnete Liste: Großbuchstaben
• Textausrichtung der ungeordneten Liste: Mitte
• Textfarbe der ungeordneten Liste: rgba(255,255,255,0)
• Textgröße der ungeordneten Liste: 0px
• Zeilenhöhe der ungeordneten Liste: 0em
• Position des ungeordneten Listenstils: Innen

Hover-Listentexteinstellungen

Ändern Sie dann einige der Werte beim Bewegen des Mauszeigers, damit die Menüelemente angezeigt werden.

• Textfarbe der ungeordneten Liste: #000000
• Textgröße der ungeordneten Liste: 2vh
• Ungeordnete Linienhöhe: 2.1em

Standardabstand

Gehen Sie als nächstes zu den Abstandseinstellungen und geben Sie dem Textmodul eine Form.

• Linker Rand: 45vw (Desktop), 39vw (Tablet), 33vw (Telefon)
• Rechter Rand: 45vw (Desktop), 39vw (Tablet), 33vw (Telefon)
• Obere Polsterung: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)
• Untere Polsterung: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)

Hover-Abstand

Ändern Sie dieselben Werte beim Hover.

• Linker Rand: 14vw
• Rechter Rand: 14vw
• Obere Polsterung: 8vw
• Untere Polsterung: 8vw

Standardrahmen

Gehen Sie zu den Rahmeneinstellungen und stellen Sie sicher, dass jede der abgerundeten Ecken einen Wert von '0px' hat.

Grenze schweben

Aktivieren Sie die Hover-Optionen an den abgerundeten Ecken und ändern Sie die Werte oben links und oben rechts.

• Oben links: 50vw
• Oben rechts: 50vw

Box Schatten

Fahren Sie fort, indem Sie dem Modul mit einem Kastenschatten etwas Tiefe geben. Dadurch wird sichergestellt, dass das Menü auf der Seite nicht unbemerkt bleibt.

• Stärke der Box-Schattenunschärfe: 1000 ms
• Schattenfarbe: rgba(0,0,0,0.68)

CSS-Klasse

Wir fügen dem Modul auch eine CSS-Klasse hinzu.

• CSS-Klasse: dt-menu

Übergänge

Verringern Sie nicht zuletzt die Übergangsdauer in den Übergangseinstellungen.

• Übergangsdauer: 100ms

Beispiel 2 neu erstellen

Textmodul zur Spalte hinzufügen

Inhalt hinzufügen

Auf zum zweiten Beispiel! Hier fügen wir wieder '≡ Menü' mit dem Absatztextstil und die Menüpunkte mit einer ungeordneten Liste hinzu. Wir werden auch einen Link zu jedem der Menüpunkte einzeln hinzufügen.

Standardhintergrundfarbe

Gehen Sie zu den Hintergrundeinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Hintergrundfarbe schweben

Ändern Sie die Hintergrundfarbe beim Bewegen des Mauszeigers.

• Hintergrundfarbe: #f71535

Standardtexteinstellungen

Wechseln Sie dann zur Registerkarte Design und nehmen Sie einige Änderungen am Erscheinungsbild der Absatzkopie vor.

• Textschriftart: Khand
• Textfarbe: #021827
• Textgröße: 3vh

Hover-Texteinstellungen

Ändern Sie diese Einstellungen beim Hover.

• Textfarbe: rgba(255,255,255,0)
• Textgröße: 0vh

Linktext-Einstellungen

Gehen Sie zu den Texteinstellungen und ändern Sie die Linktextfarbe.

• Linktextfarbe: #ffffff

Standardeinstellungen für Listentext

Ändern Sie auch die Designeinstellungen der ungeordneten Listenelemente.

• Schriftart für ungeordnete Liste: Khand
• Schriftstil für ungeordnete Liste: Großbuchstaben
• Textausrichtung der ungeordneten Liste: Mitte
• Textfarbe der ungeordneten Liste: rgba(255,255,255,0)
• Textgröße der ungeordneten Liste: 0px
• Zeilenhöhe der ungeordneten Liste: 0em
• Position des ungeordneten Listenstils: Innen

Hover-Listentexteinstellungen

Und ändern Sie einige dieser Werte, wenn Sie den Mauszeiger bewegen.

• Textfarbe der ungeordneten Liste: #ffffff
• Textgröße der ungeordneten Liste: 2vh
• Zeilenhöhe der ungeordneten Liste: 2.1em

Standardabstand

Gehen Sie dann zu den Abstandseinstellungen und geben Sie dem Modul etwas Platz.

• Rechter Rand: 88vw (Desktop & Tablet), 71vw (Telefon)
• Obere Polsterung: 6vw (Desktop), 10vw (Tablet), 18vw (Telefon)
• Untere Polsterung: 4vw (Desktop), 10vw (Tablet), 12vw (Telefon)
• Linke Polsterung: 1vw

Hover-Abstand

Ändern Sie die Werte beim Hover.

• Rechter Rand: 59vw
• Obere Polsterung: 13vw
• Untere Polsterung: 8vw
• Linke Polsterung: 1vw
• Rechte Polsterung: 13vw

Grenze

Und um dieses Viertelkreisdesign zu erstellen, ändern wir den oberen rechten Rand in den Randeinstellungen.

• Oben rechts: 50vw

Box Schatten

Wir fügen auch einen Kastenschatten hinzu, um der Seite Tiefe zu verleihen.

• Stärke der Box-Schattenunschärfe: 1000px
• Schattenfarbe: rgba(0,0,0,0.68)

CSS-Klasse

Dann fügen wir eine CSS-Klasse auf der Registerkarte "Erweitert" hinzu.

• CSS-Klasse: dt-menu

Übergänge

Verringern Sie die Übergangsdauer auf der Registerkarte „Erweitert“, um einen schnellen Übergang zu erstellen.

• Übergangsdauer: 100ms

Vorschau

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

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divis Mechanic Layout Pack ein expandierendes Sticky-Menü erstellen. Wir haben zwei verschiedene Designbeispiele behandelt, die Sie neu erstellen und auf jeder Art von Website verwenden können, die Sie erstellen! Wir hoffen, dass Ihnen diese fortlaufende Divi-Designinitiative gefällt, bei der wir jede Woche versuchen, etwas mehr in Ihre Design-Toolbox zu bringen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

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.