CCHub Logo CCHub Tailwind Collection
Komponenten Sticky Navigation Sticky Navigation-Komponente

Sticky Navigation-Komponente

Eine saubere, vertrauenswürdige und reaktionsschnelle Sticky-Navigationsleiste, die mit einem pastellfarbenen Farbschema für den geschäftlichen/professionellen Gebrauch gestaltet wurde und für Wetter-/Klimaanwendungen geeignet ist. Enthält Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<header class="w-full sticky top-0 z-50 shadow-md bg-white dark:bg-gray-800 transition-colors duration-300">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-blue-400 dark:text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 005-5V7a4 4 0 00-4-4H9a5 5 0 00-5 5v2.5a.5.5 0 01-1 0V8a7 7 0 017-7h7a7 7 0 017 7v7a7 7 0 01-7 7h-7a7 7 0 01-7-7v-2.5a.5.5 0 011 0V15z" />
      </svg>
      <span class="text-xl font-semibold text-gray-800 dark:text-gray-100">WeatherCentral</span>
    </div>

    <ul class="hidden md:flex space-x-6">
      <li><a href="#home" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Home</a></li>
      <li><a href="#forecast" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Forecast</a></li>
      <li><a href="#climate" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Climate Data</a></li>
      <li><a href="#maps" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Maps</a></li>
      <li><a href="#about" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">About</a></li>
    </ul>

    <button class="md:hidden focus:outline-none" aria-label="Toggle menu">
      <svg class="w-7 h-7 text-gray-600 dark:text-gray-300" 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>
  </nav>

  <!-- Mobile Menu (hidden by default, would be toggled with JS) -->
  <div class="md:hidden bg-white dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 py-2 hidden" id="mobile-menu">
    <ul class="flex flex-col space-y-2 px-4">
      <li><a href="#home" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Home</a></li>
      <li><a href="#forecast" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Forecast</a></li>
      <li><a href="#climate" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Climate Data</a></li>
      <li><a href="#maps" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Maps</a></li>
      <li><a href="#about" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">About</a></li>
    </ul>
  </div>
</header>

Verwandte Komponenten

Sticky Navigation-Komponente

Eine saubere, vertrauenswürdige und einfache Sticky-Navigationsleiste, die für Unternehmens- und Event-Websites geeignet ist. Verfügt über Schwarz-Weiß-Monochrom mit heller Akzentfarbe, voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

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

Eine minimalistische und reaktionsschnelle Sticky-Navigationsleiste für Blogs mit einem lebendigen Farbschema. Es unterstützt den Dunkelmodus und hat ein einfaches, übersichtliches Layout mit "Blog Title" auf der linken Seite und Navigationslinks auf der rechten Seite. Die Navigationsleiste bleibt am oberen Rand des Viewports, wenn der Benutzer einen Bildlauf durchführt.

Offen