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
Componente del menu dell'hamburger
Un complesso componente di menu per hamburger ispirato alla carta/stampa con colori caramelle/dolci, progettato per siti Web governativi/di servizio pubblico. Presenta un design reattivo con supporto per la modalità scura, che imita la carta fisica e gli elementi di stampa con colori vivaci e allegri.
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.
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.