Lesefortschritt:

    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

    Das Divi-Menü mit Icons ergänzen

    6. August 2023 CSS-Stylesheet | Divi-Theme | Menu-Modul
    Icons sind eine tolle Möglichkeit, das Menü der Website interessanter zu gestalten. Das richtige Icon sieht gut aus und gibt dem Nutzer einen Hinweis darauf, worum es sich bei dem Link handelt. Icons im Menü anzuzeigen ist überdies kein Hexenwerk.

    Submenu-Special #1: Submenüs mit CSS stylen

    10. Januar 2024 CSS-Stylesheet | Divi-Theme
    Das Submenü im Divi-Theme lässt sich in den Design-Optionen des Menü-Moduls zwar stylen - so richtig anpassen können Sie die Submenüs aber bloss mit CSS. Die dafür nötigen Klassen haben wir in einem Bausatz zusammengestellt. Möge er Ihnen das ...
    Keine Inhalte gefunden.

    Kategorien

    CSS-Stylesheet Divi-Theme Fonts & Icons functions.php header.php htaccess HTML Mediathek NAS Plugins Scripts SEO Sicherheit SocialMedia Word­Press wp-config.php

    Divi-Module

    Akkordeon-Modul Audio-Modul Bild-Modul Blog-Modul Button-Modul Code-Modul Countdown-Modul Filterbares Portfolio Galerie-Modul Handlungsaufruf-Modul Kontaktformular-Modul Login-Modul Menu-Modul Portfolio-Modul Posttitel-Modul Registerkarten-Modul Seitenleisten-Modul Slider-Modul Suche-Modul Testimonial-Modul Text-Modul Umschalter-Modul Video-Modul

    Dr.-Code-Specials

    Anker-Special Aufräum-Special Bilder-Special Blog-Modul-Special Call-To-Action-Special Dateidownload-Special Eyecatcher-Special Font-Special Icon-Special Login-Special

    Neueste Beiträge

    Mediathek: Upload-Ordner in Word­Press definieren
    publiziert am 18. März 2026

    Der Speed-Booster-Hack: Word­Press-Seite in Rekordzeit laden – der 550. Beitrag von Dr. Code
    publiziert am 15. März 2026

    Link-Special – Trick #1: Externe Links automatisch mit einem Icon versehen
    publiziert am 11. März 2026

    Link-Special – Trick #2: Automatische Verlinkung von Schlagwörtern in Word­Press-Beiträgen
    publiziert am 8. März 2026

    Word­Press-Beiträge zwingend einer Kategorie zuordnen
    publiziert am 4. März 2026

    sowie 546 weitere publizierte Tipps & Tricks

    Geplante Beiträge

    Suchformular des Divi-Themes stylen
    >>> erscheint am 22. März 2026

    Beitragsnummerierung im Backend anzeigen – wahlweise auch im Frontend
    >>> erscheint am 25. März 2026

    Register im Divi-Theme vertikal statt horizontal anordnen
    >>> erscheint am 29. März 2026

    sowie 185 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.

    mehr Infos

    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.

    Jetzt kostenlos und spamfrei registrieren

    Themenidee?

    Können wir Ihnen zu einem ganz bestimmten Thema weiterhelfen? Unsere Leserinnen und Leser haben oft die besten Ideen.

    Themenvorschlag

    Treffen Sie Vor­sichts­mass­nah­men 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 Test­um­ge­bung zu arbeiten und/oder Si­che­rungs­ko­pien anzulegen, bevor Sie ans Werk gehen.

    Werbung

     

    Pin It on Pinterest

    Share This
    Überblick über den Datenschutz

    Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.