CCHub Logo CCHub Tailwind Collection
Komponenten Hamburger Menü Glasmorphismus Hamburger Menü

Glasmorphismus Hamburger Menü

Eine einfache, reaktionsschnelle Hamburger-Menükomponente mit Glassmorphism-Design, komplementärem Farbschema und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<nav class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-blue-500 dark:bg-gray-800 dark:bg-opacity-20 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white text-lg font-semibold">My Blog</div>
    <button class="text-white focus:outline-none lg:hidden">
      <svg class="w-6 h-6" 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 12h16m-4 6h4"></path>
      </svg>
    </button>
    <div class="hidden lg:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">About</a>
      <a href="#" class="text-white hover:text-gray-200">Contact</a>
    </div>
  </div>
</nav>

Verwandte Komponenten

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

Hamburger-Menü-Komponente

Responsive Hamburger Menükomponente mit Dunkelmodus

Offen

Hamburger-Menü-Komponente

Eine komplexe, reaktionsschnelle Hamburger-Menükomponente mit Glassmorphism-Design und einem mattglasähnlichen transluzenten Effekt, der sich für ein Portfolio eignet, in dem Arbeiten oder Produkte präsentiert werden. Es enthält eine Unterstützung für dunkle Themen und verwendet Tailwind CSS für das Styling.

Offen