Menú de hamburguesas orgánicas en escala de grises
Un componente de menú de hamburguesas receptivo con un estilo de diseño orgánico y fluido que utiliza una combinación de colores en escala de grises. Ideal para documentación o sitios wiki, con soporte para modo oscuro y un efecto de transición suave para el cambio de menú.
Código HTML
<div class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between">
<a href="#" class="flex-shrink-0 text-gray-900 dark:text-gray-50 text-2xl font-bold font-serif italic tracking-wide">
FlowDocs
</a>
<!-- Mobile Hamburger Button -->
<button class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 group" aria-label="Toggle menu">
<div class="space-y-2">
<span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transform transition duration-300 ease-in-out group-focus:translate-y-2 group-focus:rotate-45"></span>
<span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transition duration-300 ease-in-out group-focus:opacity-0"></span>
<span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transform transition duration-300 ease-in-out group-focus:-translate-y-2 group-focus:-rotate-45"></span>
</div>
</button>
<!-- Desktop Menu Items -->
<div class="hidden lg:flex items-center space-x-8">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
Documentation
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
Guides
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
API
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
Community
</a>
<a href="#" class="py-2 px-4 rounded-full bg-gray-800 text-gray-50 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-50 transition duration-200 ease-in-out text-lg font-semibold shadow-md">
Get Started
</a>
</div>
</nav>
<!-- Mobile Menu (Invisible by default, would be toggled by JS) -->
<!-- For Tailwind-only, this would typically require a hidden/block class toggle. -->
<!-- As we are JS-free, this is a conceptual placeholder representing what would animate. -->
<div class="hidden lg:hidden flex-col items-stretch text-center pb-4 space-y-4 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
<a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl shadow-inner">
Documentation
</a>
<a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
Guides
</a>
<a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
API
</a>
<a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
Community
</a>
<a href="#" class="mx-4 py-3 px-6 rounded-full bg-gray-800 text-gray-50 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-50 transition duration-200 ease-in-out text-xl font-semibold shadow-lg">
Get Started
</a>
</div>
</div>Componentes relacionados
Componente del menú de hamburguesas
Un componente de menú de hamburguesas receptivo con un diseño brutalista, con alto contraste, estilos audaces y compatibilidad con el modo oscuro.
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.
Menú de hamburguesas de comercio electrónico retro
Un componente de menú de hamburguesas complejo, receptivo y compatible con el modo oscuro para comercio electrónico, con un estilo retro / vintage (años 80 / 90) y un esquema de color complementario (púrpura, cian, dorado). Cuenta con navegación principal, enlaces de cuentas, carrito, búsqueda y un interruptor de CSS puro usando el truco de casilla de verificación. Utiliza clases CSS de Tailwind.