Astro-Kurs 24: Interaktive Elemente

Modul 5 – Webseiten erweitern · Astro-Anfängerkurs der Know-How-Schmiede

Voraussetzung: Etappe 1 und 2 des Kurses. Das Beispielprojekt „Meine Modellbau-Werkstatt“ wird fortgeführt. Kopiere Code nicht blind über schon vorhandene Seiten, sondern ergänze bestehende Bereiche.

Lernziele

Du entwickelst ein bedienbares Menü und verstehst den Unterschied zwischen einer normalen HTML-Schaltfläche und einem JavaScript-Ereignis. Du achtest auf Zugänglichkeit durch aria-expanded und Tastaturbedienung.

1. Ein Menü, das sich öffnen lässt

Lege src/components/MobilesMenue.astro an und nutze die Komponente in deinem Layout. Das hier ist eine eigenständige Alternative zur bisherigen Navigation: Entferne deshalb die alte <nav>-Leiste im Header, bevor du die Komponente einsetzt.

<nav aria-label="Hauptnavigation" class="menue">
  <button type="button" aria-expanded="false" aria-controls="seitenlinks" id="menueknopf">
    Menü öffnen
  </button>
  <div id="seitenlinks" class="links" hidden>
    <a href="/">Startseite</a>
    <a href="/projekte">Projekte</a>
    <a href="/kontakt">Kontakt</a>
    <a href="/rechner">Rechner</a>
  </div>
</nav>
<style>
  .links { display:flex; flex-wrap:wrap; gap:1rem; padding:1rem 0; }
  .links a { color:inherit; }
  button { padding:.7rem 1rem; cursor:pointer; }
</style>
<script>
  const knopf = document.querySelector<HTMLButtonElement>('#menueknopf');
  const links = document.querySelector<HTMLDivElement>('#seitenlinks');
  knopf?.addEventListener('click', () => {
    if (!links) return;
    links.hidden = !links.hidden;
    const offen = !links.hidden;
    knopf.setAttribute('aria-expanded', String(offen));
    knopf.textContent = offen ? 'Menü schließen' : 'Menü öffnen';
  });
</script>

Einbau

In src/layouts/Layout.astro im Frontmatter:

---
import MobilesMenue from '../components/MobilesMenue.astro';
const { title = 'Meine Modellbau-Werkstatt' } = Astro.props;
---

Ersetze die bisherige Navigation im Header durch <MobilesMenue />. Wenn dein Layout aus Etappe 2 einen anderen Dateinamen besitzt, passe den Import entsprechend an.

Warum hidden? Die Links bleiben bei geschlossenem Menü aus der Tab-Reihenfolge heraus. Ein echter öffentlicher Auftritt braucht zusätzlich Styling für Smartphone und Desktop; dieses Beispiel fokussiert zunächst das Verhalten.

Übung

Baue einen weiteren Link zum Blog ein. Teste die Bedienung mit Tab und Enter sowie auf einem schmalen Browserfenster.