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

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.

Vorschau

HTML-Code 

<div class="relative flex flex-col items-center bg-gray-800 min-h-screen p-4 dark:bg-gray-900">
    <button class="hamburger flex items-center justify-center w-10 h-10 bg-white bg-opacity-30 backdrop-blur-md rounded-full shadow-lg hover:bg-opacity-50 dark:bg-gray-700 dark:hover:bg-opacity-50">
        <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
        <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
        <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
    </button>
    <nav class="absolute left-0 top-12 w-64 bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg transition-transform duration-300 ease-in-out transform -translate-x-full group-hover:translate-x-0 dark:bg-gray-700">
        <div class="flex flex-col p-4">
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Home</a>
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">About</a>
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Portfolio</a>
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Contact</a>
        </div>
    </nav>
    <div class="mt-5 w-full flex justify-center">
        <img src="https://picsum.photos/200/300" alt="Portfolio Item" class="rounded-lg shadow-lg">
    </div>
    <div class="mt-5 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white bg-opacity-90 shadow-lg">
        <p class="ml-2 text-white">John Doe</p>
    </div>
</div>

Verwandte Komponenten

3D-Hamburger-Menükomponente

Eine reaktionsschnelle Hamburger-Menükomponente mit 3D-Ästhetik, warmem, neutralem Farbschema und Unterstützung des Dunkelmodus, geeignet für Unterhaltungs- und Medienplattformen. Verfügt über einen subtilen 3D-Hover-Effekt.

Offen

Hamburger-Menü-Komponente

Eine skeuomorphe Hamburger-Menükomponente für ein Armaturenbrett mit pastellfarbenem Farbschema und minimalistischem Design.

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