CCHub Logo CCHub Tailwind Collection
Komponenten Sticky Navigation Sticky Navigation (Glasmorphismus)

Sticky Navigation (Glasmorphismus)

Sticky Navigation Component mit Unterstützung für Glassmorphism-Stil, responsive und Dark Theme.

Vorschau

HTML-Code 

<nav class="sticky top-0 z-10 backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white shadow-lg">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <div class="flex-shrink-0">
        <span class="text-2xl font-semibold text-gray-900 dark:text-white">Glassmorphism Nav</span>
      </div>
      <div class="hidden md:block">
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
      </div>
      <div class="-mr-2 flex md:hidden">
        <button type="button" class="bg-gray-100 dark:bg-gray-700 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-200 dark:hover:text-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Services</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
    </div>
  </div>
</nav>

Verwandte Komponenten

Sticky Navigation-Komponente

Eine Sticky-Navigationskomponente mit Neumorphism-Design, komplementärem Farbschema, moderater Komplexität und reaktionsschneller Unterstützung für dunkle Themen für ein Dashboard. Das Design enthält weiche Schatten für den Neumorphismus-Effekt und verwendet Komplementärfarben, um eine optisch ansprechende Benutzeroberfläche zu schaffen. Es eignet sich für ein Dashboard, das Datenvisualisierung und Bedienfelder bereitstellt.

Offen

Sticky Navigation-Komponente

Minimalistische, reaktionsschnelle, klebrige Navigationsleiste für eine Wetter-/Klima-Website mit coolen neutralen Farben, Unterstützung des Dunkelmodus und interaktiven Elementen. Konzipiert für mittlere Komplexität mit funktionalen Links und einer Suchleiste.

Offen

Graustufen-Skeuomorphes Sticky Nav

Eine reaktionsschnelle Sticky-Navigationsleiste für Blogs, die mit Skeuomorphismus unter Verwendung einer Graustufenpalette gestaltet ist. Bietet Unterstützung für den Dunkelmodus und ein einfaches Layout. Erstellt mit Tailwind CSS (nur HTML), kein JavaScript. Das skeuomorphe Design zielt darauf ab, die Navigationsleiste wie ein physisches, leicht erhabenes Element erscheinen zu lassen.

Offen