Animierte Navigations-Links in der Navigation

CSS

20. Jan.

In diesem Blogbeitrag werden wir uns ansehen, wie man mit CSS einen unterstrichenen Effekt für die Navigation auf einer Website erstellt. Der Effekt wird erreicht, indem ein Pseudoelement (::after) verwendet wird, um einen schwarzen Strich unter den Navigationslinks anzuzeigen, wenn der Mauszeiger darüber bewegt wird.

.header-nav-item::after {
  content: '';
  background: #ff69b4; //farbe
  height: 2px; //dicke
  width: 0;
  display: block;
  margin-top: 2px !important;
  transition: width 2s; //schnelligkeit
  margin: 0 auto;
}

.header-nav-item:hover::after {
  width: 100%;
}

.header-nav-item--active a {
    background-image: none !important;
} // Den Hintergrund einer geöffneten Seite entfernen, damit nichts doppelt angezeigt wird

Der erste Teil des Codes legt das Pseudoelement ::after für die Navigationslinks fest: .header-nav-item::after. Das content-Attribut wird auf einen leeren String gesetzt, damit kein Inhalt angezeigt wird. Der Hintergrund wird auf #ff69b4 (pink) gesetzt und die Höhe auf 2px festgelegt. Die Breite wird auf 0 gesetzt und display auf block, damit der Strich nicht sichtbar ist.

Der nächste Teil des Codes ist die hover-Funktion: .header-nav-item:hover::after. Wenn der Mauszeiger über einem Navigationslink schwebt, wird die Breite des Strichs auf 100% gesetzt, was ihn sichtbar macht.

Der letzte Teil des Codes entfernt den Hintergrund einer geöffneten Seite, damit nichts doppelt angezeigt wird: .header-nav-item--active a. Dies verhindert, dass der Hintergrund des aktuellen Navigationslinks doppelt angezeigt wird, wenn die Seite aufgerufen wird.

Insgesamt ermöglicht dieser Code einen einfachen Weg, um einen unterstrichenen Effekt für die Navigation auf einer Website zu erstellen. Der Effekt kann durch Änderung der Farbe, Dicke und Übergangsgeschwindigkeit angepasst werden, um das Design der Website zu verbessern.

Die Navigations-Links sind jetzt animiert. Wenn du weitere Fragen zur Gestaltung von Navigations-Links in Squarespace hast, lasse mir gerne einen Kommentar hier unter dem Post da!

Squarespace Probeabo starten