Cerca componenti

Categorie

Componenti Menù Hamburger

Menù Hamburger

Menu di icone a tre righe comune sui dispositivi mobili

Menù Hamburger E-commerce retrò

Un componente di menu per hamburger complesso, reattivo e supportato dalla modalità oscura per l'e-commerce, con un'estetica retrò/vintage (anni '80/'90) e una combinazione di colori complementari (viola, ciano, oro). Presenta la navigazione principale, i collegamenti all'account, il carrello, la ricerca e un interruttore CSS puro utilizzando l'hack della casella di controllo. Utilizza le classi CSS Tailwind.

Aperto Anteprima

                <header class="fixed top-0 w-full z-50 bg-white dark:bg-[#1A1A1A] shadow-lg">
    <div class="container mx-auto flex justify-between items-center p-4">
        <!-- Logo/Site Title -->
        <div class="text-2xl font-bold text-black dark:text-white">RetroShop</div>

        <!-- Hamburger/Cart/Account icons -->
        <div class="flex items-center space-x-4">
             <!-- Account/Cart Icons placeholders -->
             <a href="#account" class="text-black dark:text-white hover:text-[#A720DA] text-xl focus:outline-none" aria-label="Account"><svg class="w-6 h-6" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg></a>
             <a href="#cart" class="text-black dark:text-white hover:text-[#A720DA] text-xl focus:outline-none" aria-label="Cart"><svg class="w-6 h-6" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></a>
             <!-- Hamburger Label -->
             <label for="menu-toggle" class="block cursor-pointer lg:hidden z-50 w-6 h-6 flex flex-col justify-around focus:outline-none" aria-label="Toggle menu">
                 <div class="hamburger-icon bg-black dark:bg-white"></div>
                 <div class="hamburger-icon bg-black dark:bg-white"></div>
                 <div class="hamburger-icon bg-black dark:bg-white"></div>
             </label>
        </div>
    </div>
</header>

<!-- Hidden Checkbox Hack -->
<input type="checkbox" id="menu-toggle" class="hidden">

<!-- Overlay (Sibling to panel) -->
<div class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden overlay"></div>

<!-- Navigation Panel (Sibling to checkbox) -->
<nav class="fixed top-0 right-0 w-64 md:w-80 lg:w-96 h-full transform translate-x-full transition-transform duration-300 ease-in-out z-50 bg-white dark:bg-[#1A1A1A] border-l-4 border-[#20DACA] dark:border-[#A720DA]" role="navigation" aria-label="Main menu">
    <div class="p-6 overflow-y-auto h-full">
        <!-- Close Button Label -->
        <label for="menu-toggle" class="absolute top-4 right-4 text-3xl font-bold cursor-pointer text-black dark:text-white hover:text-[#FFD700]" aria-label="Close menu">&times;</label>

        <!-- Panel Content -->
        <div class="mt-8">
            <h2 class="text-xl font-bold mb-6 text-black dark:text-white">Menu</h2>

            <!-- Main Navigation -->
            <div class="mb-6 border-b-2 border-[#20DACA] dark:border-[#A720DA] pb-4">
                <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Shop</h3>
                <ul>
                    <li class="mb-2"><a href="#new" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">New Arrivals</a></li>
                    <li class="mb-2"><a href="#sales" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">Sales</a></li>
                    <li class="mb-2"><a href="#categories" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">Categories</a></li>
                </ul>
            </div>

            <!-- Account/User -->
            <div class="mb-6 pb-4 border-b-2 border-[#20DACA] dark:border-[#A720DA]">
                 <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Account</h3>
                 <div class="flex items-center space-x-3 mb-4">
                     <!-- Avatar -->
                     <img src="https://randomuser.me/api/portraits/men/72.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-[#FFD700]">
                     <span class="text-black dark:text-white">Hello, User!</span>
                 </div>
                 <ul>
                    <li class="mb-2"><a href="#login" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">Login / Sign Up</a></li>
                    <li class="mb-2"><a href="#account" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">My Account</a></li>
                 </ul>
            </div>

            <!-- Cart -->
             <div class="mb-6 pb-4 border-b-2 border-[#20DACA] dark:border-[#A720DA]">
                 <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Your Cart</h3>
                 <a href="#cart" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] flex items-center py-1">
                     🛒 Items (3)
                 </a>
             </div>

             <!-- Search (Simple Input) -->
             <div class="mb-6">
                  <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Search</h3>
                  <input type="text" placeholder="Product search..." class="w-full p-2 border-2 border-[#20DACA] dark:border-[#A720DA] bg-white dark:bg-[#1A1A1A] text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFD700] focus:border-transparent">
             </div>

             <!-- Placeholder Image (Optional Retro feel) -->
             <div class="mt-6">
                  <img src="https://picsum.photos/seed/retro-shop-menu/300/200" alt="Retro Shop Image" class="w-full h-auto object-cover border-2 border-[#FFD700]">
             </div>

        </div>
    </div>
</nav>

<!-- Add the CSS for checkbox hack and hamburger animation -->
<style>
    /* Hamburger animation */
    .hamburger-icon {
        display: block;
        width: 1.5rem; /* w-6 */
        height: 0.25rem; /* h-1 */
        margin: 0.25rem 0;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    /* Show overlay when checkbox is checked */
    #menu-toggle:checked ~ .overlay {
        display: block;
    }

    /* Slide panel into view when checkbox is checked */
    #menu-toggle:checked ~ nav {
        transform: translateX(0);
    }

     /* Animate hamburger icon to X */
    #menu-toggle:checked + .overlay + nav + header label .hamburger-icon:nth-child(1) {
        transform: translateY(0.5rem) rotate(45deg); /* Adjust based on margin/height */
    }
    #menu-toggle:checked + .overlay + nav + header label .hamburger-icon:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
    }
    #menu-toggle:checked + .overlay + nav + header label .hamburger-icon:nth-child(3) {
        transform: translateY(-0.5rem) rotate(-45deg); /* Adjust based on margin/height */
    }

     /* Hide hamburger label on screens larger than lg breakpoint - Adjust if menu should always be hamburger */
    @media (min-width: 1024px) {
       [for="menu-toggle"] {
             display: none;
         }
    }
     /* On large screens, potentially show a different nav style - Not implemented here as only hamburger was requested */

</style>

Componente del menu dell'hamburger

Un menu hamburger reattivo progettato per le interfacce dei social media con un tema in modalità oscura e una combinazione di colori complementari.

Aperto Anteprima

                <div class="lg:hidden">
    <div class="flex items-center justify-between p-5 bg-gray-900 text-white">
        <div class="text-2xl font-bold">SocialApp</div>
        <button id="menu-toggle" class="focus:outline-none">
            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
        </button>
    </div>
    <div id="menu" class="absolute top-0 left-0 w-full h-full bg-gray-800 opacity-0 pointer-events-none transition-opacity duration-300 ease-in-out">
        <div class="flex flex-col items-center justify-center h-full space-y-5 text-xl text-white">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full border-2 border-indigo-500">
            <a href="#" class="hover:text-indigo-300 transition duration-300">Home</a>
            <a href="#" class="hover:text-indigo-300 transition duration-300">Profile</a>
            <a href="#" class="hover:text-indigo-300 transition duration-300">Messages</a>
            <a href="#" class="hover:text-indigo-300 transition duration-300">Settings</a>
        </div>
    </div>
</div>

<style>
  #menu-toggle:focus + #menu {
      opacity: 1;
      pointer-events: auto;
  }
</style>

Menu dell'hamburger skeuomorfo

Un componente Hamburger Menu reattivo progettato con elementi scheumorfici, colori vivaci e supporto per temi scuri per i siti di e-commerce.

Aperto Anteprima

                <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>

Componente del menu dell'hamburger

Un componente del menu dell'hamburger reattivo progettato in stile Material Design con supporto per temi scuri, adatto per la navigazione del cruscotto.

Aperto Anteprima

                <div class="bg-gray-800 text-white h-screen flex flex-col">
    <div class="flex justify-between items-center p-5">
        <div class="text-2xl font-bold">Dashboard</div>
        <button id="menu-toggle" class="focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" 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 id="menu" class="hidden bg-gray-700 p-4 rounded-lg shadow-lg">
        <ul class="space-y-2">
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Home</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Profile</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Settings</a></li>
            <li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Logout</a></li>
        </ul>
    </div>
    <div class="flex-1 p-5">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=1" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 1</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=2" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 2</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/100?random=3" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
                <div class="text-xl font-semibold">Card Title 3</div>
                <p class="text-gray-400">Some descriptive text for this card.</p>
            </div>
        </div>
    </div>
</div>

Componente del menu dell'hamburger

Un complesso componente reattivo per il menu dell'hamburger con design glassmorphism, caratterizzato da un effetto traslucido simile al vetro smerigliato, adatto per un portfolio che mostra lavori o prodotti. Include un supporto per il tema scuro e utilizza Tailwind CSS per lo stile.

Aperto Anteprima

                <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>

Componente del menu dell'hamburger

Un componente del menu dell'hamburger reattivo progettato con uno stile 3D, adatto per scopi di dashboard. Incorpora una combinazione di colori triadici e ha un'interfaccia complessa con elementi interattivi, che supportano sia temi chiari che scuri.

Aperto Anteprima

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative w-16 h-16 mt-8 cursor-pointer group">
        <div class="absolute inset-0 bg-blue-500 rounded-lg transform transition-transform duration-200 ease-in-out group-hover:scale-105 dark:bg-blue-400"></div>
        <div class="bg-red-500 w-16 h-2 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-red-400"></div>
        <div class="bg-yellow-500 w-16 h-2 mt-1 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-yellow-400"></div>
    </div>
    <nav class="absolute top-16 left-0 w-64 bg-white dark:bg-gray-800 shadow-lg rounded-lg transition-all duration-300 transform -translate-y-10 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
        <ul class="py-2">
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Dashboard</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Reports</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Analytics</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/women/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Settings</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/30.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Profile</span>
            </li>
        </ul>
    </nav>
</div>

Componente del menu dell'hamburger

Un componente del menu dell'hamburger reattivo progettato per l'uso nella dashboard, disegnato in un design 3D con una combinazione di colori in scala di grigi, adatto sia per temi chiari che scuri.

Aperto Anteprima

                <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>

Componente del menu dell'hamburger

Un componente del menu dell'hamburger scheumorfico per una dashboard con una combinazione di colori pastello e un design minimalista.

Aperto Anteprima

                <div class="flex items-center justify-between p-4 bg-pastel-light dark:bg-pastel-dark rounded-lg shadow-lg">
    <div class="flex items-center">
        <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
        <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
    </div>
    <button class="flex items-center p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
        <div class="hamburger"> 
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200"></div>
        </div>
    </button>
</div>

<div class="hidden lg:block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg mt-2">
    <ul class="space-y-2">
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">User Profile</span>
        </li>
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">Settings</span>
        </li>
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">Logout</span>
        </li>
    </ul>
</div>

<style>
.hamburger {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>

Componente del menu dell'hamburger

Un componente reattivo del menu Hamburger progettato con lo stile Brutalism utilizzando Tailwind CSS, con supporto per la modalità oscura e segnaposto per immagini e avatar.

Aperto Anteprima

                <div class="flex items-center justify-between p-5 bg-gray-800 text-white">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-3">
        <span class="text-2xl font-bold">Brutalism Menu</span>
    </div>
    <div class="lg:hidden">
        <button id="menu-toggle" class="flex items-center justify-center h-10 w-10 rounded-md bg-gray-600 hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-200">
            <svg class="w-6 h-6 text-white" 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>
    <div class="hidden lg:flex space-x-4">
        <a href="#" class="font-semibold hover:text-gray-400">Home</a>
        <a href="#" class="font-semibold hover:text-gray-400">About</a>
        <a href="#" class="font-semibold hover:text-gray-400">Services</a>
        <a href="#" class="font-semibold hover:text-gray-400">Contact</a>
    </div>
</div>

<div id="menu" class="lg:hidden bg-gray-900 text-white fixed top-0 left-0 w-full h-full z-50 hidden">
    <div class="flex flex-col items-center justify-center h-full space-y-4">
        <a href="#" class="text-lg font-bold hover:text-gray-400">Home</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">About</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">Services</a>
        <a href="#" class="text-lg font-bold hover:text-gray-400">Contact</a>
        <button class="mt-6 h-10 w-10 bg-red-600 hover:bg-red-500 rounded-full">
            <svg class="w-6 h-6 text-white" 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="M6 18L18 6M6 6l12 12" /></svg>
        </button>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-gray-800 { background-color: #1a1a1a; }
    .bg-gray-900 { background-color: #121212; }
}
</style>

Componente del menu dell'hamburger

Un componente di menu per hamburger reattivo con un design brutalista, caratterizzato da contrasto elevato, stili audaci e supporto per la modalità oscura.

Aperto Anteprima

                <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>