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

Keine Inhalte gefunden.

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.