CCHub Logo CCHub Tailwind Collection
Komponenten Hamburger Menü Hamburger-Menü-Komponente

Hamburger-Menü-Komponente

Eine minimalistische und reaktionsschnelle Hamburger-Menükomponente mit einem Regenbogen-Farbschema mit Farbverlauf, die für Dating-/Social-Media-Plattformen entwickelt wurde und Unterstützung für den Dunkelmodus bietet.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Industrial_Agriculture_Hamburger_Menu

Eine komplexe, industriell angehauchte Hamburger-Menükomponente mit einem warmen "Sonnenuntergang"-Farbschema, das für Landwirtschafts-/Landwirtschafts-Websites entwickelt wurde. Verfügt über exponierte Elemente, Rohmaterialästhetik und mehrere interaktive Elemente, die mit Unterstützung des Dunkelmodus vollständig reaktionsschnell sind.

Offen

Hamburger-Menü-Komponente

Eine reaktionsschnelle Hamburger-Menü-Komponente, die mit einem 3D-Stil entworfen wurde und für Dashboard-Zwecke geeignet ist. Es enthält ein triadisches Farbschema und verfügt über eine komplexe Benutzeroberfläche mit interaktiven Elementen, die sowohl helle als auch dunkle Themen unterstützen.

Offen

Skeuomorpher Hamburger Menü

Eine reaktionsschnelle Hamburger-Menü-Komponente, die mit skeuomorphen Elementen, leuchtenden Farben und Unterstützung für dunkle Designs für E-Commerce-Websites entwickelt wurde.

Offen