Erstellen Sie eine animierte Seitenleiste mit HTML, CSS und JavaScript
Erfahren Sie, wie Sie mithilfe von Webtechnologien eine benutzerdefinierte Seitenleiste mit einer Umschaltfunktion von Grund auf neu erstellen.
In diesem Artikel gebe ich Ihnen eine Schritt-für-Schritt-Anleitung für die Implementierung einer reibungslos animierten Seitenleiste für Ihre Webanwendung. Standardmäßig ist die Seitenleiste sichtbar, Sie können sie mit einer Schaltfläche umschalten und den rechten Ansichtsbereich ein- oder ausklappen.
3 Schritte zum Erstellen einer benutzerdefinierten Seitenleiste
- Fügen Sie den HTML-Code für die Seitenleiste hinzu
- Fügen Sie CSS-Stile für die Seitenleiste hinzu
- Fügen Sie JavaScript hinzu, um die Seitenleiste zu erweitern oder zu reduzieren
Öffnen Sie Ihr Projekt in Ihrem bevorzugten Texteditor und fügen Sie das folgende Code-Snippet zum bodyElement hinzu. Beachten Sie, dass das folgende Code-Snippet zwei HTML-Blöcke enthält. Einer hat eine ID namens mySidebarund der andere hat eine ID namens main. Der Inhalt der Seitenleiste befindet sich innerhalb des Elements mit der ID mySidebar. Wohingegen das Element mit der ID mainden Inhalt speichert, der auf der rechten Seite der Ansichtsseite angezeigt wird.
Schritt 2: Fügen Sie CSS-Stile für die Seitenleiste hinzu
Fügen Sie nun der Anwendung ein CSS-Stylesheet hinzu, das der Seitenleiste visuelle Effekte oder Animationen hinzufügt. Erstellen Sie eine Datei mit dem Namen sidebar.cssund legen Sie sie in einem Verzeichnis gemäß Ihrer Projektstruktur ab und verknüpfen Sie sie mit dem headAbschnitt Ihrer Anwendung.
<link rel="stylesheet" href="sidebar.css">
Schritt 3: Fügen Sie JavaScript hinzu, um die Seitenleiste zu erweitern oder zu reduzieren
Fügen Sie nun der Anwendung eine JavaScript-Datei hinzu, die es der Funktion ermöglicht, die Seitenleiste ein- oder auszublenden. Erstellen Sie eine Datei mit dem Namen sidebar.jsund legen Sie sie in einem Verzeichnis gemäß Ihrer Projektstruktur ab und verknüpfen Sie sie mit dem headAbschnitt Ihrer Anwendung.
<script src="sidebar.js"></script>
Ergebnis
Hut ab! Sie haben gelernt, wie Sie Ihre benutzerdefinierte zusammenklappbare Seitenleiste mithilfe von Webtechnologien erstellen. Machen Sie weiter und erstellen Sie beeindruckende Seitenleisten, indem Sie sie nach Ihren Bedürfnissen anpassen, und posten Sie die Screenshots im Kommentarbereich.
Wenn Sie diesen Beitrag gerne gelesen haben und ihn für Sie nützlich fanden, dann klatschen Sie bitte, teilen Sie ihn mit Ihren Freunden und folgen Sie mir, um Updates zu meinen kommenden Beiträgen zu erhalten. Sie können sich mit mir auf LinkedIn verbinden .
Suggested posts
Zeitschrift Ouvert
Offenes Tagebuch: Ein Bild pro Tag. Geschichten haben mich schon immer fasziniert.
Related posts
Schaffung einer sicheren Arbeitsumgebung
„Er wird mich beschützen, wenn ich in Gefahr bin. Er wird mich in seinem Zelt verstecken.
Die „Learning at Work Week“ ist wichtiger als Sie denken
Es fällt uns oft schwer, das umzusetzen, von dem wir wissen, dass es gut für uns ist. Von der Aussage, dass wir einen Lebensgefährten lieben, bis hin zur Erinnerung daran, wie ein Pirat zu reden – es wird immer diejenigen geben, die behaupten, dass ein Tag, eine Woche oder ein Monat voller Ereignisse nicht nötig sei, weil sie diese Dinge bereits tun.
Netzwerk-TV Twitter
Was alt ist, ist jetzt wieder neu und was früher das glitzernde, glänzende Ding war, fühlt sich jetzt langweilig an. Ich spreche nicht davon, dass JNCO-Jeans zusammen mit anderen Modetrends der späten 1990er Jahre unter den coolen Kids in der Innenstadt ein Comeback erleben.
Verfolgen Sie jeden mit nur einer Telefonnummer | OSINT-Untersuchung
Sie können ein OSINT-Ermittler, ein CTF-Spieler oder einfach jemand sein, der Spam-Anrufe erhält. Jemand, der versucht, die Nummer zu bestätigen, die Sie in einer Anzeige gesehen haben.