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 réactif stylisé selon les principes de conception matérielle à l’aide de Tailwind CSS, avec un thème sombre et incluant des images et un avatar aléatoires.
Composant de navigation collante
Un composant de navigation autocollant de style brutaliste adapté aux interfaces de médias sociaux, doté d’un design audacieux et contrasté et d’une prise en charge du mode sombre.
Composant de navigation collante
Composant de navigation collant avec conception Skeuomorphism, réactif et prise en charge du thème sombre. Utilise Tailwind CSS.