Normalerweise verwenden Webentwickler JavaScript, um dynamische Seitenanimationen zu erstellen. Versteckte Menüs und Subnavigation sind nur einige Beispiele dafür, wie diese Techniken auf einer Live-Website verwendet werden. Dank CSS3-Übergängen können wir diese Animationen jetzt nachahmen, ohne dass JavaScript in Sicht ist.
In diesem Tutorial möchte ich zeigen, wie eine innere verborgene Inhaltsleiste erstellt wird, die beim Schweben nach unten verschoben wird. Sie können dies in Ihre Kopfzeile, Fußzeile oder irgendwo im Seiteninhalt einfügen. Es ist eine sehr flexible Technik, die nicht viel Zeit zum Arbeiten benötigt. Außerdem unterstützen alle modernen Webbrowser CSS3-Übergangseffekte.
Live Demo - Quellcode herunterladen
HTML erstellen
Die Hauptseite von index.html ist sehr einfach und wir müssen keine alternativen Bibliotheken hinzufügen. jQuery ist nicht notwendig, es sei denn, Sie möchten andere Plugins verwenden. Ich werde alle CSS-Codes der Hauptseite in einem Dokument speichern styles.css.
Damit die verborgene Div-Leiste den Schwebeflug erweitern kann, müssen wir sie in der Haupt-Leiste verschachteln. Immer wenn ein Benutzer ein Element in jQuery schwebt, können Sie ein anderes internes Element dazu zwingen, offen damit zu bleiben. Bei der Verwendung von CSS3-Übergängen erstellen sie jedoch sofort Hover-Ereignisse und Nicht-Hover-Ereignisse. Sobald der Benutzer den Cursor von der oberen Leiste wegbewegt, wird das div daher sofort ausgeblendet, es sei denn, es ist verschachtelt.
Also habe ich ein neues div mit der ID erstellt #tophiddenbar. Es ist innen verschachtelt #topbar denn als untergeordnetes Element wird der Hover-Status für alle Elemente beibehalten. Das Schweben über der verborgenen Leiste ist jetzt auch getrennt von #topbar Die CSS-Übergänge werden also nicht sofort ausgeblendet, bevor Sie Links lesen oder darauf klicken können. Ich habe mir nicht die Mühe gemacht, eine ungeordnete Liste für die Links zu verwenden, aber dies ist natürlich die beste Vorgehensweise, wenn Sie Ihre eigenen HTML-Teilnavigationen erstellen.
Dokument CSS
Normalerweise haben wir die gleichen Zurücksetzungs- und Dokumentstile wie andere ähnliche Lernprogramme. Es gibt jedoch einige Updates für die #topbar Element, die entscheidend dafür sind, dass dies funktioniert. Wir brauchen nämlich die Überlauf versteckt Eigenschaft, um sicherzustellen, dass nach dem Laden der Seite kein zusätzlicher Inhalt angezeigt wird. Sie müssen dies für Ihr eigenes Containerelement verwenden, damit das ausgeblendete Div zunächst nicht angezeigt wird. Dann erhöhen wir den Höhenwert durch einen Übergang.
Wenn Sie mit CSS-Übergängen vertraut sind, sollte es nicht schwer zu verstehen sein. Grundsätzlich definieren wir eine Zeitdauer für die Animation sowie die Eigenschaften, für die Übergangseffekte erforderlich sind. Sie müssen nicht alle CSS-Resets wie oben hinzugefügt einfügen. Sie sind nur für diese Demo wichtig und können im Vergleich zu anderen Bibliotheken wie Twitter Bootstrap einen alternativen Ausgangspunkt bieten.
Animieren des Menüs
Die tatsächliche Übergangseigenschaft wird auf das Element #topbar angewendet, da der Höhenwert animiert wird. Ich verwende eine feste Höhe von 36px, die zunimmt, um das innere verborgene Div anzuzeigen. Denken Sie daran, dass dieses Div anfangs direkt in der Seitenreihenfolge angezeigt werden kann. Es wird nur aufgrund der Überlaufeigenschaft des Containers ausgeblendet #topbar Element.
Wenn Sie die obere Symbolleiste mit dem Mauszeiger darüber bewegen, wird sie bis auf 60px hoch. Dies ist genug Platz, um unsere neue Unternavigation mit Links zu Seiten von Design Shack vorzuführen. Dieses typische Design lässt sich einfach in jedes andere Projekt einfügen. Solange der Hintergrund vertikal verlängert werden kann, kann er als Containerelement verwendet werden.
Die CSS3-Übergangseigenschaften weisen auch zwei Herstellerpräfixe auf, die in Mozilla- und Webkit-Rendering-Engines verwendet werden. Das linear Schlüsselwort ist nur eine Art von Animationsstil, der für den Standardwert weggelassen werden kann. Diese Eigenschaft wird als Übergangstiming-Funktion bezeichnet und verfügt über eine ausgewählte Anzahl alternativer Werte, die Sie testen können. So oder so ist diese Animation perfekt für jede Website, die ein wenig Inhalt auf der Seite verborgen halten muss.
Live Demo - Quellcode herunterladen
Fazit
Sie werden feststellen, dass diese Technik einige CSS-Techniken implementiert, die im Spektrum neuer sind. Für typische Frontend-Webentwickler ist dies jedoch nicht zu verwirrend. Es gibt andere mögliche Methoden, z. B. die Verwendung der absoluten Positionierung, die in einem äußeren Container verschachtelt ist. Wenn beide Divs nebeneinander im HTML-Code liegen, kann der Fokus manchmal verloren gehen, wenn Sie den Mauszeiger über das ausgeblendete Element bewegen. Weitere Informationen oder Anregungen zu diesem Lernprogramm können Sie im nachstehenden Diskussionsbereich weitergeben.