Componenti Menù Hamburger Componente del menu dell'hamburger

Componente del menu dell'hamburger

Un menu hamburger reattivo progettato per le interfacce dei social media con un tema in modalità oscura e una combinazione di colori complementari.

Anteprima

Codice HTML

<div class="lg:hidden">
    <div class="flex items-center justify-between p-5 bg-gray-900 text-white">
        <div class="text-2xl font-bold">SocialApp</div>
        <button id="menu-toggle" class="focus:outline-none">
            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
        </button>
    </div>
    <div id="menu" class="absolute top-0 left-0 w-full h-full bg-gray-800 opacity-0 pointer-events-none transition-opacity duration-300 ease-in-out">
        <div class="flex flex-col items-center justify-center h-full space-y-5 text-xl text-white">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full border-2 border-indigo-500">
            <a href="#" class="hover:text-indigo-300 transition duration-300">Home</a>
            <a href="#" class="hover:text-indigo-300 transition duration-300">Profile</a>
            <a href="#" class="hover:text-indigo-300 transition duration-300">Messages</a>
            <a href="#" class="hover:text-indigo-300 transition duration-300">Settings</a>
        </div>
    </div>
</div>

<style>
  #menu-toggle:focus + #menu {
      opacity: 1;
      pointer-events: auto;
  }
</style>

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.

Aperto

Menù dell'hamburger Art Déco Sport/Fitness

Un componente del menu per hamburger complesso e reattivo con un'estetica Art Déco, una combinazione di colori pastello e il supporto della modalità scura, adatto per applicazioni sportive e di fitness.

Aperto

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.

Aperto