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.
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
Brutalismus Klebrige Navigation
Eine komplexe Sticky Navigation Component mit Brutalismus-Design, monochromatischem Farbschema, entwickelt für Portfolios, mit responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.
Sticky Navigation-Komponente
Eine minimalistische, klebrige Navigationskomponente mit flachem Design und monochromatischem Farbschema für Geschäfts-/Unternehmenswebsites. Das Design enthält mehrere interaktive Elemente und unterstützt dunkle Themen.
Sticky Navigation-Komponente
Sticky Navigation Component mit Skeuomorphism-Design, responsivem Design und Unterstützung für dunkle Themen. Verwendet Tailwind CSS.