Responsive Akkordeon-Menü-Schnittstellen erstellen

Einführung

In diesem Projekt lernst du, wie du eine einfache falzende Akkordeon-Menü mit HTML, CSS und JavaScript erstellst. Das falzende Akkordeon-Menü ist ein übliches Benutzeroberflächenelement, das Benutzern ermöglicht, Inhaltsabschnitte zu erweitern und zusammenzufassen, was es zu einer nützlichen Funktion für das kompakte und strukturierte Anzeigen von Informationen macht.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die HTML-Struktur für das falzende Akkordeon-Menü einrichtest
• Wie du das Akkordeon-Menü mit CSS gestaltest
• Wie du der Akkordeon-Menü mit JavaScript Interaktivität hinzufügst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Ein responsives und visuell ansprechendes Akkordeon-Menü-Schnittstelle zu erstellen
• JavaScript verwenden, um Interaktivität und dynamisches Verhalten für Webelemente hinzuzufügen
• HTML, CSS und JavaScript zu integrieren, um eine funktionale und benutzerfreundliche Webanwendung zu erstellen

Projektstruktur einrichten

In diesem Schritt wirst du das Projekt einrichten, indem du die bereitgestellten Dateien im Editor öffnest.

1. Öffne den Editor und du solltest die folgenden Dateien sehen: index.html, style.css, index.js und jquery-3.6.0.min.js.
2. Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke des WebIDE, um das Projekt auszuführen.
3. Öffne "Web 8080" oben in der VM und aktualisiere es manuell, um die Seite zu sehen. Klicken auf ein Bild auf einer zusammengeklappten Seite erweitert es nicht. Du kannst es wie folgt sehen:

Interaktivität mit jQuery hinzufügen

In diesem Schritt wirst du der Akkordeon-Menü mit jQuery Interaktivität hinzufügen.

1. Öffne die Datei index.js in deinem Editor.
2. Füge folgenden Code hinzu:

$(".option").click(function () {
  $(".option").removeClass("active");
  $(this).addClass("active");
});

Dieser Code fügt einem Klickereignis-Lauscher zu jedem .option-Element hinzu. Wenn auf ein .option-Element geklickt wird, entfernt der Code die active-Klasse von allen .option-Elementen und fügt die active-Klasse zum geklickten .option-Element hinzu. Dies wird das Akkordeon-Menü entsprechend zusammenklappen oder erweitern.

3. Speichere die Datei index.js.
4. Aktualisiere den Browser, um das fertige Ergebnis zu sehen.
5. Klicke auf die verschiedenen Akkordeon-Menü-Optionen, um sie zu erweitern und zusammenzuziehen.

Der Effekt sieht so aus:

Herzlichen Glückwunsch! Du hast das Projekt mit dem falzenden Akkordeon-Menü abgeschlossen.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Übungen absolvieren, um deine Fähigkeiten zu verbessern.