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

Hamburger-Menü-Komponente

Eine reaktionsschnelle Hamburger-Menükomponente, die für die Verwendung im Dashboard entwickelt wurde und in einem 3D-Design mit einem Graustufen-Farbschema gestaltet ist, das sowohl für helle als auch für dunkle Themen geeignet ist.

Vorschau

HTML-Code 

<div class="bg-gray-200 dark:bg-gray-800 transition duration-300 ease-in-out p-4 rounded-lg shadow-lg transform hover:scale-105">
    <div class="flex justify-between items-center">
        <div class="text-lg font-bold text-gray-800 dark:text-white">Dashboard</div>
        <button class="text-gray-800 dark:text-white focus:outline-none hover:text-gray-600 dark:hover:text-gray-400">
            <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>
    <nav class="mt-4">
        <ul class="space-y-2">
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Home</a>
            </li>
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Profile</a>
            </li>
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Settings</a>
            </li>
            <li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
                <a href="#" class="block text-gray-800 dark:text-white">Logout</a>
            </li>
        </ul>
    </nav>
</div>

Verwandte Komponenten

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

Bio Graustufen Hamburger Menü

Eine reaktionsschnelle Hamburger-Menükomponente mit einem organischen, fließenden Designstil unter Verwendung eines Graustufen-Farbschemas. Ideal für Dokumentations- oder Wiki-Websites, mit Unterstützung für den Dunkelmodus und einem sanften Übergangseffekt für den Menüwechsel.

Offen

Cyberpunk_Hamburger_Menu_Photography

Ein einfaches, reaktionsschnelles Hamburger-Menü zum Thema Cyberpunk für Fotografie-Portfolios mit dunklem Hintergrund, hellen dreiadischen Akzentfarben für Neon-Ästhetik und vollständiger Unterstützung des Dunkelmodus.

Offen