Glassmorphism Hamburger Menu
Un componente per menu hamburger semplice e reattivo con design Glassmorphism, combinazione di colori complementari e supporto per la modalità scura.
Codice HTML
<nav class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-blue-500 dark:bg-gray-800 dark:bg-opacity-20 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="text-white text-lg font-semibold">My Blog</div>
<button class="text-white focus:outline-none lg:hidden">
<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="M4 6h16M4 12h16m-4 6h4"></path>
</svg>
</button>
<div class="hidden lg:flex space-x-4">
<a href="#" class="text-white hover:text-gray-200">Home</a>
<a href="#" class="text-white hover:text-gray-200">About</a>
<a href="#" class="text-white hover:text-gray-200">Contact</a>
</div>
</div>
</nav>Componenti correlati
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.
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.
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.