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

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.

Aperto