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.
Codice HTML
<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>Componenti correlati
Componente del menu dell'hamburger
Un componente di menu per hamburger complesso, reattivo e vivace con microinterazioni per l'e-commerce, con una navigazione a scorrimento, collegamenti alle categorie, una barra di ricerca e icone dei social media. Supporta la modalità oscura e utilizza Lorem Picsum per le immagini.
Componente del menu dell'hamburger
Un componente di menu per hamburger reattivo dal design minimalista/piatto adatto per siti Web aziendali/aziendali, utilizzando una combinazione di colori pastello e supportando la modalità oscura.
Componente del menu dell'hamburger 19
Un componente scheletrico del menu dell'hamburger progettato in stile scheumorfico, che imita gli elementi del mondo reale. È reattivo e include il supporto per la modalità oscura utilizzando Tailwind CSS.