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 - Dunkler Modus Pastell

Eine klebrige Navigationsleiste für den Dunkelmodus mit einem responsiven Layout und pastellfarbenen Akzenten. Die Navigationsleiste verbleibt beim Scrollen des Benutzers am oberen Rand des Viewports, wodurch die Benutzerfreundlichkeit für inhaltsintensive Seiten verbessert wird. Es enthält Platzhalter für ein Logo oder einen Website-Titel sowie Navigationslinks, die mit Tailwind CSS gestaltet sind, um ein modernes, sauberes Aussehen zu erzielen.

Offen

Sticky Navigation-Komponente

Eine einfache, saubere und vertrauenswürdige Sticky-Navigationsleiste, die für Unternehmens- und professionelle Websites geeignet ist, insbesondere für Jobbörsen und Karriereplattformen. Verfügt über kontrastreiche Farben, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

Offen

Sticky Navigation-Komponente

Sticky Navigation Component mit Skeuomorphism-Design, responsivem Design und Unterstützung für dunkle Themen. Verwendet Tailwind CSS.

Offen