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.
Codice HTML
<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>Componenti correlati
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.
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.
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.