Composant de navigation collante
Une barre de navigation autocollante propre, fiable et réactive, conçue avec une palette de couleurs pastel pour une utilisation professionnelle, adaptée aux applications météorologiques/climatiques. Inclut la prise en charge du mode sombre.
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>Composants associés
Composant de navigation autocollant - Pastel neumorphe
Un composant de navigation complexe et collant avec un style de conception Neumorphism et une palette de couleurs pastel, adapté à la documentation ou aux sites wiki. Il propose des éléments de navigation imbriqués, une barre de recherche et la prise en charge du mode sombre, le tout implémenté avec HTML et Tailwind CSS pour une réactivité totale.
Cyberpunk Navigation collante
Une barre de navigation réactive et collante au style cyberpunk, aux tons crépuscules/chauds, adaptée aux interfaces finance/banque. Comprend la prise en charge du mode sombre et des éléments interactifs.
Composant de navigation collante
Un composant de navigation autocollant réactif avec un design minimaliste, une palette de couleurs triadique et une prise en charge du thème sombre, adapté aux applications de médias sociaux.