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

Hamburger-Menü-Komponente

Eine reaktionsschnelle Hamburger-Menükomponente mit brutalistischem Design mit hohem Kontrast, auffälligen Stilen und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="relative bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <button class="flex items-center justify-center w-10 h-10 text-black dark:text-white hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md transition-all">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
        </svg>
    </button>
    <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg opacity-0 transition-opacity duration-300 ease-in-out transform scale-0 origin-top-right">
        <div class="flex flex-col p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-10 h-10 mb-2">
            <h3 class="text-lg font-bold text-black dark:text-white">Menu Title</h3>
            <ul class="space-y-2">
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 1</a>
                </li>
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 2</a>
                </li>
                <li>
                    <a href="#" class="block px-2 py-1 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all">Item 3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Verwandte Komponenten

Art Deco Sport/Fitness Hamburger Menü

Eine komplexe, reaktionsschnelle Hamburger-Menükomponente mit Art-Déco-Ästhetik, pastellfarbenem Farbschema und Unterstützung des Dunkelmodus, geeignet für Sport- und Fitnessanwendungen.

Offen

Hamburger-Menü-Komponente

Eine komplexe, reaktionsschnelle Hamburger-Menükomponente mit Glassmorphism-Design und einem mattglasähnlichen transluzenten Effekt, der sich für ein Portfolio eignet, in dem Arbeiten oder Produkte präsentiert werden. Es enthält eine Unterstützung für dunkle Themen und verwendet Tailwind CSS für das Styling.

Offen

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