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.

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);
}

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);
}

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);
}

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;
}

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;
}

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);
}

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);
}

So ändern Sie die Farbe der Cursor-Textmarkierung im Divi-Theme

26. Mai 2024 CSS-Stylesheet | Divi-Theme

Lust auf die etwas anderen Farben? Mit diesem kurzen Snippet können Sie die Farbe der Cursor-Hervorhebung auf Ihrer Divi-Website nach Belieben ändern.

Menu-Special #2: Trennlinie im Divi-Mobile-Menu entfernen

30. Juli 2024 CSS-Stylesheet | Divi-Theme

Das Standard-Divi-Menu für die Anzeige auf Mobilgeräten zeigt einen farbigen Rand an. Ich mag das - aber es gefällt nicht allen. Hier ein Hack, wie Sie den Trennstrich los werden.

Kategorie- oder Schlagwort-Widget Marke Eigenbau – mit wenig PHP-Code

4. Juni 2023 CSS-Stylesheet | Scripts | WordPress

WordPress liefert ein Widget für Kategorien und Schlagworte mit. Damit lassen sich die verwendeten Taxonomien praktisch anzeigen und auch gleich mit den entsprechenden Übersichtsseiten verlinken. Das Styling der Widgets ist aber ziemlich ...

Feldbeschriftungen im Divi-Kontaktformular über dem Eingabefeld anzeigen

27. Dezember 2023 CSS-Stylesheet | Divi-Theme | Kontaktformular-Modul

Die meisten Kontaktformulare zeigen Beschriftungen über den Eingabefeldern. Im Divi-Formularmodul sind diese Feldbeschriftungen standardmässig nicht sichtbar. Mit einem CSS-Snippet werden die Beschriftungen eingeschaltet. Wir zeigen Ihnen, wie ...

Divi-Module

Dr.-Code-Specials

Geplante Beiträge

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

Divi-Menu-Hack #3: Stylishe Designs für das Divi-Menu-Modul

So ändern Sie die Farbe der Cursor-Textmarkierung im Divi-Theme

Menu-Special #2: Trennlinie im Divi-Mobile-Menu entfernen

Kategorie- oder Schlagwort-Widget Marke Eigenbau – mit wenig PHP-Code

Feldbeschriftungen im Divi-Kontaktformular über dem Eingabefeld anzeigen

Kategorien

Divi-Module

Dr.-Code-Specials

Neueste Beiträge

Geplante Beiträge

Child-Theme erstellen

Member-Bereich

Themenidee?

Werbung

Pin It on Pinterest