CCHub Logo CCHub Tailwind Collection
Komponenten Hamburger Menü Hamburger Menü Komponente 19

Hamburger Menü Komponente 19

Eine skelettartige Hamburger-Menü-Komponente, die im skeuomorphen Stil gestaltet ist und Elemente aus der realen Welt nachahmt. Es ist reaktionsschnell und bietet Unterstützung für den Dunkelmodus mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden w-64">
  <div class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 p-4 rounded-t-lg">
    <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Menu</h1>
    <button class="focus:outline-none">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
      </svg>
    </button>
  </div>
  <div class="p-4 space-y-4">
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Home</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">About</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Services</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Contact</span>
    </div>
  </div>
  <div class="absolute bottom-0 left-0 right-0 bg-gray-300 dark:bg-gray-700 p-4 rounded-b-lg">
    <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Log Out</a>
  </div>
</div>

Verwandte Komponenten

Hamburger-Menü-Komponente

Eine komplexe, reaktionsschnelle und lebendige Hamburger-Menükomponente mit Mikrointeraktionen für den E-Commerce, mit einer ausziehbaren Navigation, Kategorielinks, einer Suchleiste und Social-Media-Symbolen. Es unterstützt den Dunkelmodus und verwendet Lorem Picsum für Bilder.

Offen

Hamburger-Menü-Komponente

Eine reaktionsschnelle Hamburger-Menü-Komponente, die im Brutalismus-Stil mit einem Pastell-Farbschema gestaltet ist. Geeignet für ein Portfolio, in dem Arbeiten oder Produkte präsentiert werden.

Offen

Retro E-Commerce Hamburger Menü

Eine komplexe, reaktionsschnelle, vom Dark-Mode unterstützte Hamburger-Menükomponente für den E-Commerce, die mit einer Retro-/Vintage-Ästhetik (80er/90er Jahre) und einem komplementären Farbschema (Lila, Cyan, Gold) gestaltet ist. Verfügt über Hauptnavigation, Kontolinks, Warenkorb, Suche und einen reinen CSS-Schalter mit dem Kontrollkästchen-Hack. Verwendet Tailwind CSS-Klassen.

Offen