Componentes Menú de hamburguesas Menú de hamburguesas orgánicas en escala de grises

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ú.

Vista previa

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 de menú de hamburguesas para comida/restaurante (Memphis Pastel)

Un componente de menú de hamburguesas simple y receptivo para sitios web de alimentos / restaurantes, con una estética de diseño de Memphis con colores pastel. Incluye soporte para modo oscuro.

Abrir

Componente del menú de hamburguesas

Un componente de menú de hamburguesa responsivo para sitios de blogs/contenido, con modo oscuro, combinación de colores en escala de grises y elementos interactivos complejos puramente con HTML y Tailwind CSS. Diseñado para una lectura y un consumo de contenidos óptimos.

Abrir

Menú de hamburguesas skeuomórficas

Un componente de menú de hamburguesas responsivo diseñado con elementos skeuomórficos, colores vibrantes y soporte de temas oscuros para sitios de comercio electrónico.

Abrir