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

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.

Vorschau

HTML-Code 

<nav class="bg-white dark:bg-gray-800 p-4 rounded shadow">
    <div class="flex justify-between items-center">
        <div class="text-2xl font-bold text-gray-800 dark:text-white">
            Logo
        </div>
        <button id="menu-toggle" class="text-gray-800 dark:text-white focus:outline-none">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
            </svg>
        </button>
    </div>
    <div id="menu" class="hidden mt-4">
        <ul class="flex flex-col space-y-2">
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
        </ul>
    </div>
</nav>
<style>
    @media (min-width: 768px) {
        #menu {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-top: 0;
        }
        #menu-toggle {
            display: none;
        }
    }
</style>

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, von Papier/Druck inspirierte Hamburger-Menükomponente mit bonbonfarbenen/süßen Farben, die für Websites von Behörden und öffentlichen Diensten entwickelt wurde. Verfügt über ein responsives Design mit Unterstützung für den Dunkelmodus, das physisches Papier und Druckelemente mit hellen, fröhlichen Farben nachahmt.

Offen

3D-Hamburger-Menükomponente

Ein responsives Hamburger-Menü mit einem 3D-Design mit triadischem Farbschema und komplexen interaktiven Elementen für Geschäfts-/Unternehmenswebsites.

Offen