Animierte Unterstreichung in Menüleiste

CSS und andere hilfreiche Anweisungen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Animierte Unterstreichung in Menüleiste

Ungelesener Beitrag von Tommy Herrmann »

ich habe heute diese kleine Animation bei "hover" (Mausüber) an den Links der Menüleiste eingefügt. Vielleicht kann das mal jemand gebrauchen.

https://www.mobirise-tutorials.com/SuperfoodM5/

Diese Class habe ich an jeden Link der Navi mit ran geschrieben (siehe Screenshot):

class="hover-underline-animation"

Diese CSS habe ich zusätzlich in denb Bereich "CSS Editor" vom "Code Editor" des Menüblocks kopiert:

Code: Alles auswählen

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}
.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

Animierte Menübar.jpg
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Animierte Unterstreichung in Menüleiste

Ungelesener Beitrag von Werner-Zenk.de »

Vielen Dank Tommy für diesen tollen Tipp :tu:
https://werner-zenk.de/css/animierte_un ... ichung.php
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Animierte Unterstreichung in Menüleiste

Ungelesener Beitrag von Tommy Herrmann »

Moin Werner,

ach prima - da gibt es nun gleich noch zusätzliche Animationen, die man sicherlich mal gut verwenden kann.

Vielen Dank :tu:

P.S.:

vielleicht solltest Du die Links nicht mit # ("nach oben") sondern einfach mit "javascript: void();" verlinken, dann kann man das auch am Handy gut testen und sehen.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Animierte Unterstreichung in Menüleiste

Ungelesener Beitrag von Werner-Zenk.de »

:tu: Danke für den Tipp
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 5 Gäste