Trick # 386 | Dieser Beitrag beinhaltet 513 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Die Gestaltungsmöglichkeiten des Standard-Menüs im Divi-Theme sind beschränkt. Es lässt sich aber noch das eine oder andere herauskitzeln. Heute zeigen wir Ihnen eine einfache Animation für das Standardmenü.
Der Effekt zeigt sich, wenn Sie über die Links des Divi-Menüs hovern. Bewegen Sie zur Probe einmal die Maus über einen der Menülinks ganz oben auf dieser Seite. Die Animation fügt je ein | links und rechts des Menüpunkts ein.
Dafür benötigen Sie bloss den folgenden CSS-Code. Fügen Sie ihn in das Stylesheet Ihrer Divi-Website ein – im Backend unter Design/Customizer/Zusätzliches CSS:
#top-menu a:hover::before,
#top-menu a:hover::after,
#top-menu a:focus::before,
#top-menu a:focus::after {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}#top-menu a::before {
margin-right: 10px;
color: #333333;
font-weight: bolder;
content: '|';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}#top-menu a::after {
margin-left: 10px;
content: '|';
color: #333333;
font-weight: bolder;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}#top-menu a::before,
#top-menu a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}Voilà – der Effekt funktioniert sogleich.
Wenn Sie statt der |-Zeichen lieber ein anderes Symbol verwenden, können Sie dies in den Zeilen 15 und 23 anpassen. Auch die Farbwerte (auf den Zeilen 13 und 24) lassen sich ändern.
Werbung
Werbung
