Tailwind CSS Academy · Lektion

Einklappbare mobile Sidebar

Implementieren Sie für Mobilgeräte eine einschiebbare Drawer-Sidebar mit JavaScript-Schalter, Overlay-Hintergrund und fließendem Translate-Übergang.

Lektion 4 von 413 Schritte

Einklappbare mobile Sidebar ist eine kostenlose Tailwind CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Tailwind CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein mobiler Seitenleisten-Drawer?

Ein mobiler Seitenleisten-Drawer gleitet vom linken Bildschirmrand herein, wenn eine Hamburger-Schaltfläche angetippt wird, und beim Schließen wieder hinaus. Anders als eine Desktop-Seitenleiste, die immer sichtbar ist, wird der mobile Drawer standardmäßig mithilfe einer CSS-Transformation außerhalb des Bildschirms verborgen.

Drei Elemente arbeiten dabei zusammen: das Hintergrund-Overlay, das den restlichen Seiteninhalt abdunkelt, das Seitenleisten-Panel, das hereingleitet, und die Umschalt-Schaltfläche in der oberen Leiste, mit der der Drawer geöffnet und geschlossen wird.

<!-- Closed state: sidebar off-screen left -->
<aside id="drawer" class="fixed inset-y-0 left-0 w-72 bg-white z-50
                          -translate-x-full transition-transform duration-300">
  <!-- sidebar content -->
</aside>

<!-- Backdrop: hidden until drawer opens -->
<div id="backdrop" class="fixed inset-0 bg-black/50 z-40 hidden"></div>

JavaScript-Umschaltung zum Öffnen und Schließen

Die Umschaltung funktioniert, indem die Klasse -translate-x-full aus dem Drawer und die Klasse hidden aus dem Hintergrund entfernt werden. Beim Schließen werden beide Vorgänge umgekehrt.

Eine einfache Hilfsfunktion openDrawer() und closeDrawer() hält die Logik übersichtlich. Fügen Sie dem Body overflow-hidden hinzu, wenn der Drawer geöffnet ist, um das Scrollen des Seiteninhalts hinter dem Overlay zu verhindern.

<script>
  const drawer = document.getElementById('drawer');
  const backdrop = document.getElementById('backdrop');

  function openDrawer() {
    drawer.classList.remove('-translate-x-full');
    backdrop.classList.remove('hidden');
    document.body.classList.add('overflow-hidden');
  }

  function closeDrawer() {
    drawer.classList.add('-translate-x-full');
    backdrop.classList.add('hidden');
    document.body.classList.remove('overflow-hidden');
  }

  // Clicking backdrop closes the drawer
  backdrop.addEventListener('click', closeDrawer);
</script>

Hereingleitender Übergang mit Tailwind

transition-transform duration-300 von Tailwind am Drawer-Panel erzeugt eine flüssige Hereingleit-Animation, wenn -translate-x-full umgeschaltet wird. duration-300 legt einen 300-ms-Übergang mit Ease fest, der dynamisch wirkt, ohne abrupt zu sein.

Sie können die Beschleunigung mit ease-in-out anpassen und die Dauer für ein schnelleres Verhalten in einfacheren UIs auf duration-200 verkürzen. Entscheidend ist, dass keine benutzerdefinierten CSS-Keyframes erforderlich sind – die Übergangsdienstprogramme von Tailwind übernehmen alles.

<!-- Drawer with slide transition -->
<aside
  id="drawer"
  class="fixed inset-y-0 left-0 w-72 bg-gray-900 text-white z-50
         -translate-x-full transition-transform duration-300 ease-in-out
         flex flex-col">
  <!-- Header -->
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800">
    <span class="font-bold text-white">Menu</span>
    <button onclick="closeDrawer()" class="text-gray-400 hover:text-white">
      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>
  </div>
</aside>

Gestaltung des Hintergrund-Overlays

Das Hintergrund-Overlay dunkelt den Inhalt hinter dem geöffneten Drawer ab und vermittelt dadurch visuell, dass der Drawer ein fokussiertes Panel ist, das Aufmerksamkeit erfordert. Verwenden Sie fixed inset-0 bg-black/50 z-40, damit es den gesamten Viewport mit halbtransparentem Schwarz bedeckt.

Das Hintergrund-Overlay liegt auf z-40 und damit unter dem Drawer auf z-50, sodass der Drawer darüber gerendert wird. Ein Einblendübergang mit transition-opacity duration-300 lässt das Overlay natürlicher erscheinen.

<div
  id="backdrop"
  class="fixed inset-0 bg-black/50 z-40 hidden
         transition-opacity duration-300">
</div>

Navigationslinks im Drawer

Im Drawer verwenden die Navigationslinks dasselbe Muster wie die Desktop-Seitenleiste, können aber etwas größeren Text verwenden, da es sich um eine Touch-Oberfläche handelt: text-base statt text-sm sorgt auf mobilen Bildschirmen für bessere Lesbarkeit.

Fügen Sie mit active:bg-gray-800 ein Verhalten mit tap-highlight-color: transparent hinzu, damit beim Antippen eines Links sofortige visuelle Rückmeldung erfolgt. Die Liste wird mit flex-1 overflow-y-auto scrollbar.

<nav class="flex-1 overflow-y-auto px-4 py-6 space-y-1">
  <a href="/" onclick="closeDrawer()"
     class="flex items-center gap-3 px-3 py-3 rounded-lg text-base font-medium
            bg-gray-800 text-white">
    Home
  </a>
  <a href="/features" onclick="closeDrawer()"
     class="flex items-center gap-3 px-3 py-3 rounded-lg text-base font-medium
            text-gray-300 hover:bg-gray-800 hover:text-white
            active:bg-gray-800 transition-colors">
    Features
  </a>
  <a href="/pricing" onclick="closeDrawer()"
     class="flex items-center gap-3 px-3 py-3 rounded-lg text-base font-medium
            text-gray-300 hover:bg-gray-800 hover:text-white
            active:bg-gray-800 transition-colors">
    Pricing
  </a>
</nav>

Hamburger-Schaltfläche in der oberen Leiste

Auf Mobilgeräten befindet sich der Hamburger-Button in der oberen Leiste, die die Seitenleiste ersetzt. Verwenden Sie für diese obere Leiste lg:hidden, damit sie nur auf kleinen Bildschirmen angezeigt wird, auf denen die Seitenleiste ausgeblendet ist.

Geben Sie dem Button mit p-2 und einem 24-Pixel-Icon (w-6 h-6) eine komfortable Touch-Zielgröße von mindestens 44×44 px. Damit erfüllen Sie die Empfehlung aus Apples HIG und Googles Material-Design-Richtlinien.

<header class="lg:hidden flex items-center justify-between px-4 py-3 bg-white border-b border-gray-200">
  <span class="font-bold text-gray-900">AppDash</span>
  <button
    onclick="openDrawer()"
    aria-label="Open navigation"
    class="p-2 text-gray-600 hover:bg-gray-100 active:bg-gray-200 rounded-lg">
    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
  </button>
</header>

Mit Escape schließen

Die Barrierefreiheit erfordert, dass Overlay-Elemente wie Drawer mit der Escape-Taste geschlossen werden können. Fügen Sie dem Dokument einen keydown-Listener hinzu, der auf event.key === 'Escape' prüft und closeDrawer() aufruft.

Dies ist eine Anforderung von WCAG 2.1 für alle modalen Oberflächen. Ohne Unterstützung für Escape sind Nutzer, die ausschließlich die Tastatur verwenden, im Drawer gefangen.

<script>
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      closeDrawer();
    }
  });
</script>

Drawer-Variante auf der rechten Seite

Manche Benutzeroberflächen verwenden für Filter, Einstellungsbereiche oder Detailansichten statt für die Navigation einen Drawer auf der rechten Seite. Ersetzen Sie left-0 durch right-0 und ändern Sie die Transformation im geschlossenen Zustand von -translate-x-full in translate-x-full, damit das Panel vom rechten Rand aus hereingleitet.

Dieselbe Technik wird in Single-Page-Anwendungen für Seitenleisten von Warenkörben, Benachrichtigungsbereiche und Detailansichten verwendet.

<!-- Right drawer -->
<aside
  id="right-drawer"
  class="fixed inset-y-0 right-0 w-80 bg-white shadow-xl z-50
         translate-x-full transition-transform duration-300 ease-in-out
         flex flex-col">
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
    <h2 class="text-lg font-semibold text-gray-900">Filter Options</h2>
    <button onclick="closeRightDrawer()" class="p-1 text-gray-400 hover:text-gray-600 rounded">
      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>
  </div>
  <div class="flex-1 overflow-y-auto p-5">
    <!-- Filter controls go here -->
  </div>
</aside>

Styling für den Hinweis zum Schließen per Wischgeste

Auf Touch-Geräten erwarten Nutzer häufig, den Drawer durch Wischen schließen zu können. Die tatsächliche Erkennung von Wischgesten erfordert zwar JavaScript (Touch Events API), aber Sie können durch einen Ziehgriff oben im Drawer einen visuellen Hinweis geben – einen kurzen horizontalen Balken, der signalisiert, dass Wischen möglich ist.

Gestalten Sie ihn als kleines abgerundetes Rechteck: mx-auto mt-2 w-10 h-1 rounded-full bg-gray-300. Dies ist eine gängige UX-Konvention aus nativen mobilen Apps, die für das Web übernommen wurde.

<aside class="fixed inset-y-0 left-0 w-72 bg-gray-900 z-50 flex flex-col -translate-x-full transition-transform duration-300">
  <!-- Drag handle -->
  <div class="flex justify-center pt-3">
    <div class="w-10 h-1 rounded-full bg-gray-600"></div>
  </div>
  <!-- Header -->
  <div class="flex items-center justify-between px-5 py-4 mt-1 border-b border-gray-800">
    <span class="font-bold text-white">Menu</span>
    <button onclick="closeDrawer()" class="text-gray-400 hover:text-white">
      &times;
    </button>
  </div>
</aside>

Fokusfalle für Barrierefreiheit

Wenn der Drawer geöffnet ist, sollte der Tastaturfokus innerhalb des Drawers gefangen sein. Dadurch wird verhindert, dass die Navigation mit der Tab-Taste Inhalte hinter dem Overlay erreicht, was Nutzer von Screenreadern verwirren kann.

Für eine vollständige Fokusfalle ist zwar JavaScript erforderlich (um mit Tab und Umschalt+Tab durch fokussierbare Elemente zu wechseln), dennoch sollten Sie immer sicherstellen, dass der Schließen-Button das erste fokussierbare Element im Drawer ist und autofocus erhält oder beim Öffnen des Drawers programmgesteuert fokussiert wird.

<script>
  function openDrawer() {
    const drawer = document.getElementById('drawer');
    const backdrop = document.getElementById('backdrop');
    drawer.classList.remove('-translate-x-full');
    backdrop.classList.remove('hidden');
    document.body.classList.add('overflow-hidden');

    // Move focus into drawer for accessibility
    const closeBtn = drawer.querySelector('button[data-close]');
    if (closeBtn) closeBtn.focus();
  }
</script>

<!-- Close button receives focus first -->
<button
  data-close
  onclick="closeDrawer()"
  class="text-gray-400 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white rounded"
  aria-label="Close menu">
  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
  </svg>
</button>

Vollständiger Aufbau des Drawer-Layouts

Ein vollständiger mobiler Drawer setzt sich aus allen Bausteinen zusammen: einer oberen Leiste mit dem Hamburger-Button, dem außerhalb des Bildschirms liegenden Drawer-Panel mit Schließen-Button und Navigationslinks sowie einem Hintergrund-Overlay. Diese drei Bestandteile sind unabhängige HTML-Elemente, die durch JavaScript miteinander verbunden werden.

Blenden Sie auf Desktop-Bildschirmen (am lg:-Breakpoint) die obere Leiste mit lg:hidden aus und zeigen Sie stattdessen die dauerhaft sichtbare Seitenleiste an. Diese Aufteilung zwischen Mobil- und Desktop-Ansicht bildet die Grundlage moderner Dashboard-Layouts.

<!-- Top bar (mobile only) -->
<header class="lg:hidden sticky top-0 bg-white border-b border-gray-200 z-30 flex items-center justify-between px-4 py-3">
  <span class="font-bold">AppDash</span>
  <button onclick="openDrawer()" aria-label="Open menu" class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
  </button>
</header>

<!-- Backdrop -->
<div id="backdrop" class="hidden fixed inset-0 bg-black/50 z-40" onclick="closeDrawer()"></div>

<!-- Drawer panel -->
<aside id="drawer" class="fixed inset-y-0 left-0 w-72 bg-gray-900 text-white z-50 flex flex-col -translate-x-full transition-transform duration-300">
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800">
    <span class="font-bold text-white">AppDash</span>
    <button data-close onclick="closeDrawer()" aria-label="Close menu" class="text-gray-400 hover:text-white">&times;</button>
  </div>
  <nav class="flex-1 overflow-y-auto px-4 py-6 space-y-1">
    <a href="/" class="block px-3 py-3 rounded-lg text-base font-medium bg-gray-800 text-white">Home</a>
    <a href="/features" class="block px-3 py-3 rounded-lg text-base font-medium text-gray-300 hover:bg-gray-800 hover:text-white">Features</a>
  </nav>
</aside>

Kurzer Test

Testen Sie Ihr Verständnis der Tailwind-CSS-Mastery-Konzepte aus dieser Lektion.

Beantworte es in der interaktiven Lektion

Zusammenfassung der Lektion

In dieser Lektion haben Sie gelernt: Der mobile Drawer verwendet drei Elemente – ein Hintergrund-Overlay, ein herein gleitendes Panel und einen Hamburger-Trigger; die Slide-Animation schaltet -translate-x-full zusammen mit transition-transform duration-300 um; und Barrierefreiheit erfordert Unterstützung für die Escape-Taste, die Fokusverwaltung beim Öffnen des Drawers sowie ein anklickbares Hintergrund-Overlay zum Schließen. Als Nächstes gestalten wir Texteingabefelder und Textareas.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 30
Lektionen: 120

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Einklappbare mobile Sidebar“ kostenlos?

Ja — der vollständige Text von „Einklappbare mobile Sidebar“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Tailwind CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Einklappbare mobile Sidebar“?

Implementieren Sie für Mobilgeräte eine einschiebbare Drawer-Sidebar mit JavaScript-Schalter, Overlay-Hintergrund und fließendem Translate-Übergang. Du übst Tailwind CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Tailwind CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. Tailwind CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Einklappbare mobile Sidebar“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Tailwind CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede Tailwind CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Tailwind CSS Academy