Componente del menú de hamburguesas
Un menú de hamburguesas receptivo diseñado para interfaces de redes sociales con un tema de modo oscuro y una combinación de colores complementaria.
Código 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>Componentes relacionados
Menú de hamburguesas Componente 19
Un componente esquelético del menú de hamburguesas diseñado en estilo skeuomórfico, que imita elementos del mundo real. Es responsivo e incluye soporte para el modo oscuro usando Tailwind CSS.
Componente del menú de hamburguesas
Un componente de menú de hamburguesa receptivo diseñado en estilo Material Design con soporte de tema oscuro, adecuado para la navegación en el tablero.
Menú de hamburguesas Glassmorphism
Un componente de menú de hamburguesas simple y receptivo con diseño Glassmorphism, combinación de colores complementaria y compatibilidad con el modo oscuro.