Componenti Menù Hamburger Componente del menu dell'hamburger

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.

Anteprima

Codice HTML

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

Componenti correlati

Menu di hamburger biologico in scala di grigi

Un componente di menu hamburger reattivo con uno stile di design organico e fluido che utilizza una combinazione di colori in scala di grigi. Ideale per la documentazione o i siti wiki, con supporto per la modalità scura e un effetto di transizione graduale per l'interruttore del menu.

Aperto

Glassmorphism Hamburger Menu

Un componente per menu hamburger semplice e reattivo con design Glassmorphism, combinazione di colori complementari e supporto per la modalità scura.

Aperto

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