Lesefortschritt:

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

6. Dezember 2023 | CSS-Stylesheet, Divi-Theme

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

Ähnliche Beiträge

Kategorien

CSS-Stylesheet Divi-Theme Fonts & Icons functions.php header.php htaccess HTML Mediathek NAS Plugins Scripts SEO Sicherheit SocialMedia WordPress 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 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 Dateidownload-Special Font-Special Icon-Special Nostalgie-Special Sicherheits-Special SocialMedia-Special

Neueste Beiträge

WordPress-User ohne Mailadresse einrichten
publiziert am 17. April 2024

Informationstext-Module (Blurbs) des Divi-Themes als Teaser verwenden
publiziert am 14. April 2024

Bullet-Points mit Divi-Icons ersetzen
publiziert am 10. April 2024

Verwandte YouTube-Videos in Divi nicht anzeigen
publiziert am 7. April 2024

Ein Browser-Back-Button für die Divi-Website
publiziert am 3. April 2024

sowie 331 weitere publizierte Tipps & Tricks

Geplante Beiträge

Slideshow mit wechselnden Bildern – aber statischer Texteinblendung
erscheint am 21. April 2024

Beliebige Divi-Module, -Zeilen oder -Sektionen per Button-Klick anzeigen oder verstecken
erscheint am 24. April 2024

Ade Bullet-Points im Footer: Aufzählungspunkte aus der Fusszeile des Divi-Themes entfernen
erscheint am 28. April 2024

sowie 195 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

Tipps & Tricks per Mail

Mit dem Newsletter von Dr. Code erhalten Sie sporadich die neuesten Hacks und Tricks zu CSS, Divi, Wordpress & Co. direkt in Ihr Mailpostfach.

anmelden

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.



Vielen Dank.

Pin It on Pinterest

Share This