Composant de navigation collante
Une barre de navigation autocollante minimaliste et réactive pour les blogs, avec une palette de couleurs vives. Il prend en charge le mode sombre et a une mise en page simple et propre avec « Titre du blog » à gauche et des liens de navigation à droite. La barre de navigation se colle en haut de la fenêtre d’affichage lorsque l’utilisateur fait défiler la page.
HTML Code
<nav class="bg-gradient-to-r from-teal-400 to-blue-500 dark:from-gray-800 dark:to-gray-900 p-4 shadow-md sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center">
<!-- Blog Title -->
<a href="#" class="text-white text-2xl font-bold dark:text-gray-100">Blog Title</a>
<!-- Navigation Links -->
<div class="hidden md:flex space-x-6">
<a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Home</a>
<a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Categories</a>
<a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">About</a>
<a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Contact</a>
</div>
<!-- Mobile Menu Button (Hamburger) -->
<div class="md:hidden">
<button class="text-white focus:outline-none">
<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>
</button>
</div>
</div>
<!-- Mobile Menu (Hidden by default, can be shown with JS) -->
<div class="md:hidden mt-4 space-y-2">
<!-- Hidden for this pure HTML example as JS is not allowed -->
</div>
</nav>Composants associés
Composant de navigation collante
Un composant de navigation autocollant en mode sombre pour le commerce électronique, utilisant une palette de couleurs complémentaires et une mise en page de base.
Skeuomorphe en niveaux de gris Sticky Nav
Une barre de navigation autocollante réactive pour les blogs, stylisée avec un skeuomorphisme à l’aide d’une palette en niveaux de gris. Dispose d’une prise en charge du mode sombre et d’une mise en page simple. Construit avec Tailwind CSS (HTML uniquement), pas de JavaScript. Le design skeuomorphe vise à faire apparaître la barre de navigation comme un élément physique, légèrement en relief.
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.