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.
Codice HTML
<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>Componenti correlati
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.
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.
Componente del menu dell'hamburger
Un componente di menu per hamburger minimalista e reattivo con una combinazione di colori arcobaleno sfumato, progettato per piattaforme di appuntamenti/social, con supporto per la modalità scura.