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

    Mauszeiger anpassen – in allen Variationen

    8. Juni 2025 CSS-Stylesheet | HTML
    Der Mauszeiger kann auf unterschiedlichste Arten dargestellt werden. Zumeist erkennen Webbrowser die gerade benötigte Darstellung von alleine. Wenn Sie nachhelfen müssen – oder eine andere Darstellung erzwingen wollen, – bedarf es eines ...

    Back-Button im Divi-Theme anzeigen

    7. Januar 2026 Divi-Theme | Scripts
    ​Den «Back-Button» in Ihrem Browser werden Sie kennen und ihn bestimmt auch rege nutzen. In diesem Artikel zeigen wir Ihnen, wie Sie eine Browser-Verlaufsschaltfläche in das Divi-Thema einfügen. Wenn Sie auf diesen Button klicken, gelangen Sie ...
    Keine Inhalte gefunden.

    Kategorien

    [showmodule id="29396"]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

    Veraltete Word­Press-Revisionen automatisch löschen
    publiziert am 8. Juli 2026

    Automatisch Blindtexte für Word­Press generieren
    publiziert am 5. Juli 2026

    Divi-Fullwidth-Header: Hässliche Wortumbrüche verhindern
    publiziert am 1. Juli 2026

    Sicher ist sicher: Word­Press-Website mit Geo-Blocking schützen
    publiziert am 28. Juni 2026

    Bildskalierung in Word­Press deaktivieren
    publiziert am 24. Juni 2026

    sowie 584 weitere publizierte Tipps & Tricks

    Geplante Beiträge

    Backend-Special – Trick #6: Word­Press-Admin-Bar auf der Live-Website ausblenden – ausser im VisualBuilder des Divi-Themes
    >>> erscheint am 12. Juli 2026

    Backend-Special – Trick #5 Schlagwörter aus dem Word­Press-Backend entfernen
    >>> erscheint am 15. Juli 2026

    Backend-Special – Trick #4: Beitragsstatus in der Word­Press-Admin-Leiste anzeigen und anpassen
    >>> erscheint am 19. Juli 2026

    sowie 148 weitere geplante Themen

    [showmodule id="3459"]

    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.