CCHub Logo CCHub Tailwind Collection
Komponenten Hamburger Menü Skeuomorpher Hamburger Menü

Skeuomorpher Hamburger Menü

Eine reaktionsschnelle Hamburger-Menü-Komponente, die mit skeuomorphen Elementen, leuchtenden Farben und Unterstützung für dunkle Designs für E-Commerce-Websites entwickelt wurde.

Vorschau

HTML-Code 

<div class="flex items-center justify-between p-4 bg-blue-500 dark:bg-blue-800 rounded-lg shadow-lg">
    <div class="flex items-center space-x-2">
        <img src="https://picsum.photos/30" alt="Logo" class="h-8 w-8 rounded-full border-2 border-white">
        <h1 class="text-white text-lg font-bold">ShopEasy</h1>
    </div>
    <button class="text-white focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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="hidden md:flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-2">
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Home</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Shop</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">About Us</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Contact</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Cart</a>
</div>

<div class="md:hidden">
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mt-2 space-y-2">
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Home</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Shop</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">About Us</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Contact</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Cart</a>
    </div>
</div>

Verwandte Komponenten

Hamburger-Menü-Komponente

Eine minimalistische/flache Design-Responsive-Hamburger-Menükomponente, die für Geschäfts-/Unternehmenswebsites geeignet ist, ein Pastellfarbschema verwendet und den Dunkelmodus unterstützt.

Offen

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

Brutalismus Hamburger Menü

Vom Brutalismus inspirierte Hamburger-Menükomponente für Dashboard mit analogem Farbschema, mäßiger Komplexität, responsivem Design und Unterstützung für dunkle Themen mit Tailwind CSS. Kein JavaScript.

Offen