Divi-Menu-Hack #3: Stylishe Designs für das Divi-Menu-Modul
6. Dezember 2023 | CSS-Stylesheet, Divi-Theme
Trick # 298 | Dieser Beitrag beinhaltet 2456 Wörter. – Geschätzte Lesezeit: ca. 13 Minuten.
Das Divi Menu-Modul verfügt über keine Hover-Stile, abgesehen von einer einfachen Änderung der Linkfarbe. Hier finden Sie eine Liste von sieben verschiedenen Hover-Effekten mit animierter Unterstreichung.
Die Stilanpassungen geschehen allesamt mit CSS-Code. Links sehen Sie den Effekt, wenn Sie die Maus über die Menulinks bewegen – rechts den zugehörigen Code.
Menu-Style #1
Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style1.
- Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
- Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.
.menu-style1 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.menu-style1 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
width: 0;
height: 5px;
bottom: 0px;
border-radius:5px;
left: 50%;
transition: 0.4s cubic-bezier(0.25, 0.1, 0, 2.02);
}
.menu-style1 ul.et-menu>li>a:hover:before {
width: calc(100% + 5px);
left: calc(5px / -2);
}
Menu-Style #2
Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style2.
- Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
- Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.
.menu-style2 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.menu-style2 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
width: 0;
height: 5px;
bottom: 0px;
left: calc(5px / -2);
transition: 0.3s cubic-bezier(.03,.3,.4,.96);
transform: skew(-10deg);
}
.menu-style2 ul.et-menu>li>a:hover:before {
width: calc(100% + 5px);
}
Menu-Style #3
Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style3.
- Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
- Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.
.menu-style3 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.menu-style3 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
width: 0;
height: 5px;
bottom: 0px;
right: calc(5px / -2);
transition: 0.3s cubic-bezier(.03,.3,.4,.96);
}
.menu-style3 ul.et-menu>li>a:hover:before {
width: calc(100% + 5px);
}
Menu-Style #4
Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style4.
- Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
- Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.
.menu-style4 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.menu-style4 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
opacity:0;
height: 5px;
bottom: calc(var(--BottomOffset) + 12px);
width: calc(100% + (5px / 2));
right: calc(5px / -4);
transition: 0.4s cubic-bezier(0,.54,.52,.76);
border-radius: 2px;
}
.menu-style4 ul.et-menu>li>a:hover:before {
bottom: 0px;
opacity: 1;
}
Menu-Style #5
Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style5.
- Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
- Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.
.menu-style5 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.menu-style5 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
opacity: 0;
height: 5px;
bottom: calc(var(--BottomOffset) - 10px);
width: calc(100% + (5px / 1.5));
right: calc(5px / -3);
transition: 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
border-radius: 5px;
}
.menu-style5 ul.et-menu>li>a:hover:before {
bottom: 0px;
opacity: 1;
}
Menu-Style #6
Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style6.
- Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
- Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.
.menu-style6 ul.et-menu>li>a {
position: relative;
z-index:1;
}
.menu-style6 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
opacity: 0;
height: 5px;
bottom: calc(var(--BottomOffset) - 10px);
width: calc(100% + (5px / 1.5));
right: calc(5px / -3);
transition: 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
transform: rotate(45deg);
transform-origin: left;
}
.menu-style6 ul.et-menu>li>a:hover:before {
bottom: 0px;
opacity: 1;
transform: rotate(0);
}
Menu-Style #7
Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style7.
- Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
- Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.
.menu-style7 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.menu-style7 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
opacity:0;
height: 5px;
bottom: 0px;
width: calc(100% + (5px / 1.5));
right:calc(5px / -3);
transition: 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
transform: rotateY(25deg) rotateX(35deg) translate(20px, -20px) skew(-35deg, 10deg);
border-radius:2px;
transform-origin: right;
}
.menu-style7 ul.et-menu>li>a:hover:before {
opacity:1;
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
}
Werbung
Kategorien
Divi-Module
Dr.-Code-Specials
Neueste Beiträge
Anzahl der Spalten im Divi-Portfolio-Modul anpassen
publiziert am 1. Oktober 2025
Textauszug-Feld (Excerpt) im WordPress-Backend für Seiten oder Beiträge deaktivieren
publiziert am 28. September 2025
Persönlichen Unterstreich-Effekt einrichten – für wichtige Texte und/oder Links
publiziert am 24. September 2025
Symbol für Untermenüs im Divi-Theme anpassen
publiziert am 21. September 2025
Reihenfolge der SocialMedia-Icons im Divi-Theme anpassen
publiziert am 17. September 2025
sowie 494 weitere publizierte Tipps & Tricks
Geplante Beiträge
So erstellen Sie eine Lesefortschrittsanzeige im Divi-Theme – der 500. Beitrag von Dr. Code
>>> erscheint am 5. Oktober 2025
3D-Bilder-Animation: Das Bild, das sich um die eigene Achse dreht
>>> erscheint am 8. Oktober 2025
Pre-Loader auf der Divi-Website einrichten
>>> erscheint am 12. Oktober 2025
sowie 233 weitere geplante Themen
Child-Theme erstellen
Wir empfehlen Ihnen den Einsatz eines Child-Themes – damit sind Sie sicher, dass Ihre Anpassungen bei einem Theme-Update nicht überschrieben werden.
Member-Bereich
Dr. Code bietet Ihnen kostenlosen Zugang zu unserer umfangreichen Hack-Datenbank. Neben den bislang veröffentlichten Beiträgen und Tricks sind aberdutzende weitere Themen für Member bereits jetzt verfügbar.
Themenidee?
Können wir Ihnen zu einem ganz bestimmten Thema weiterhelfen? Unsere Leserinnen und Leser haben oft die besten Ideen.
Treffen Sie Vorsichtsmassnahmen bei der Nutzung der Inhalte dieser Website. Auch wenn die Tipps und Tricks erprobt sind, kann mal was schiefgehen.
Wir empfehlen, möglichst in einer Testumgebung zu arbeiten und/oder Sicherungskopien anzulegen, bevor Sie ans Werk gehen.