Componente del menú de hamburguesas
Un componente de menú de hamburguesas minimalista y receptivo con un esquema de colores de arco iris degradado, diseñado para plataformas de citas/sociales, con soporte para modo oscuro.
Código HTML
<div class="relative bg-white dark:bg-gray-900 md:flex md:items-center md:justify-between p-4 shadow-md">
<div class="flex items-center justify-between">
<a href="#" class="text-2xl font-bold bg-gradient-to-r from-red-500 via-yellow-500 to-indigo-500 text-transparent bg-clip-text">
Connectify
</a>
<!-- Mobile menu button -->
<button id="menu-button" class="md:hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-400" aria-label="Toggle menu">
<svg class="w-6 h-6 text-gray-800 dark:text-gray-200" 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 12h16M4 18h16"></path>
</svg>
</button>
</div>
<!-- Mobile menu content -->
<nav id="mobile-menu" class="hidden md:flex md:items-center md:space-x-8 mt-4 md:mt-0">
<a href="#matches" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Matches</a>
<a href="#chat" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Chat</a>
<a href="#discover" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:shadow-outline rounded-lg md:inline md:mt-0">Discover</a>
<a href="#profile" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Profile</a>
<a href="#settings" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Settings</a>
</nav>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuButton = document.getElementById('menu-button');
const mobileMenu = document.getElementById('mobile-menu');
menuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
});
</script>Componentes relacionados
Componente del menú de hamburguesas
Un componente de menú de hamburguesa receptivo diseñado con estilo brutalismo usando Tailwind CSS, con soporte para modo oscuro y marcadores de posición para imágenes y avatares.
Componente de menú de hamburguesas 3D
Un menú de hamburguesas receptivo con un diseño 3D que incorpora un esquema de color triádico y elementos interactivos complejos para sitios web comerciales / corporativos.
Componente del menú de hamburguesas
Un componente de menú de hamburguesas receptivo diseñado con un estilo 3D, adecuado para fines de tablero. Incorpora un esquema de color triádico y tiene una interfaz compleja con elementos interactivos, que admite temas claros y oscuros.