Composant de navigation collante
Barre de navigation autocollante minimaliste et réactive pour un site Web météo/climat, avec des couleurs neutres froides, la prise en charge du mode sombre et des éléments interactifs. Conçu pour une complexité moyenne avec des liens fonctionnels et une barre de recherche.
HTML Code
<header class="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-900 transition-colors duration-300 ease-in-out">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between flex-wrap gap-4">
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 whitespace-nowrap tracking-tight transition-colors duration-300 ease-in-out">
Weather<span class="text-blue-600 dark:text-blue-400">Sphere</span>
</a>
<div class="flex items-center gap-4 order-3 md:order-none">
<div class="relative flex items-center">
<input type="search" placeholder="Search city..." class="py-2 pl-10 pr-3 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 ease-in-out w-full max-w-xs md:max-w-none">
<svg class="absolute left-3 text-gray-500 dark:text-gray-400 w-5 h-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<button type="button" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-300 ease-in-out">
<svg class="w-6 h-6" 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="M12 3v1m0 16v1m9-9h1M3 12h1m15.325-7.757l-.707-.707M4.343 19.343l-.707-.707m13.414 0l.707-.707M4.343 4.343l-.707-.707"></path>
</svg>
</button>
</div>
<input type="checkbox" id="menu-toggle" class="hidden peer">
<label for="menu-toggle" class="cursor-pointer md:hidden text-gray-600 dark:text-gray-300 p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300 ease-in-out order-2">
<svg class="w-6 h-6" 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>
</label>
<div class="hidden peer-checked:block md:flex flex-col md:flex-row md:items-center gap-x-6 gap-y-2 w-full md:w-auto mt-4 md:mt-0 pb-2 md:pb-0 border-t md:border-t-0 border-gray-200 dark:border-gray-700 order-last md:order-none transition-all duration-300 ease-in-out" id="navbar-links">
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
Dashboard
</a>
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
Forecast
</a>
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
Climate Data
</a>
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
Maps
</a>
<a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
About
</a>
</div>
</nav>
</header>Composants associés
Composant de navigation collante
Composant de navigation collant avec le style Glassmorphism, les effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de navigation collante
Un composant de navigation autocollant conçu dans un style skeuomorphe, mettant en valeur des couleurs complémentaires, adapté à un portfolio avec une interface riche.
Composant de navigation collante
Une barre de navigation autocollante simple, propre et fiable, adaptée aux sites Web d’entreprise et professionnels, en particulier aux sites d’emploi et aux plateformes de carrière. Dispose de couleurs à contraste élevé, de réactivité et de prise en charge du mode sombre.