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.
HTML Code
<header class="sticky top-0 z-50 bg-gray-100 p-4 shadow-xl dark:bg-gray-800 transition-colors duration-300 md:px-8">
<nav class="container mx-auto flex items-center justify-between flex-wrap">
<div class="flex items-center flex-shrink-0 text-gray-800 dark:text-gray-200 mr-6">
<a href="#" class="font-bold text-2xl tracking-tight text-pink-500 dark:text-purple-400 drop-shadow-md">Doc<span class="text-blue-400 dark:text-teal-300">Wiki</span></a>
</div>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-400 hover:text-gray-900 hover:border-gray-900 dark:text-gray-400 dark:border-gray-500 dark:hover:text-gray-100 dark:hover:border-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 group">
<svg class="fill-current h-3 w-3 group-hover:text-blue-500 dark:group-hover:text-teal-400" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
</button>
</div>
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden transition-all duration-300 ease-in-out" id="navbar-collapse">
<ul class="text-sm lg:flex-grow lg:flex lg:justify-end lg:items-center">
<li class="relative group lg:mr-6 mt-4 lg:mt-0">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl
shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark"
tabindex="0">
Features
<svg class="h-4 w-4 inline-block ml-1 group-hover:rotate-180 transition-transform duration-200" 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="M19 9l-7 7-7-7"></path>
</svg>
</a>
<div class="lg:absolute lg:top-full lg:left-0 lg:w-48 bg-gray-100 dark:bg-gray-700 rounded-xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl mt-2 lg:mt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform lg:origin-top-left scale-y-75 group-hover:scale-y-100">
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Overview</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">API Reference</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Integrations</a>
</div>
</li>
<li class="relative group lg:mr-6 mt-4 lg:mt-0">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl
shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark"
tabindex="0">
Guides
<svg class="h-4 w-4 inline-block ml-1 group-hover:rotate-180 transition-transform duration-200" 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="M19 9l-7 7-7-7"></path>
</svg>
</a>
<div class="lg:absolute lg:top-full lg:left-0 lg:w-48 bg-gray-100 dark:bg-gray-700 rounded-xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl mt-2 lg:mt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform lg:origin-top-left scale-y-75 group-hover:scale-y-100">
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Getting Started</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Best Practices</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Troubleshooting</a>
</div>
</li>
<li class="lg:mr-6 mt-4 lg:mt-0">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl
shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">
Community
</a>
</li>
<li class="lg:mr-6 mt-4 lg:mt-0">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl
shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">
Blog
</a>
</li>
</ul>
<div class="mt-4 lg:mt-0 flex items-center">
<div class="relative w-full lg:max-w-xs">
<input type="search" placeholder="Search..." class="block w-full pl-10 pr-4 py-2 rounded-full text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 border-none
shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-teal-500 transition-all duration-200 placeholder-gray-500 dark:placeholder-gray-400">
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400">
<svg class="h-5 w-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>
</div>
<button class="ml-4 p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300
shadow-neumorphic-light-md dark:shadow-neumorphic-dark-md
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark
hover:text-blue-500 dark:hover:text-teal-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 transition-all duration-200">
<svg class="h-5 w-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="M12 3v1m0 16v1m9-9h1M3 12H2m8.058-9.058l1.414-1.414M12.942 21.058l-1.414 1.414M21.058 12.942l-1.414 1.414M2.942 11.058l1.414-1.414M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"></path></svg>
<span class="sr-only">Toggle Dark Mode</span>
</button>
<a href="#" class="ml-4 p-1 rounded-full
shadow-neumorphic-light-md dark:shadow-neumorphic-dark-md
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark
transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<span class="sr-only">User Profile</span>
</a>
</div>
</div>
</nav>
</header>
<style>
/* Base light neumorphic shadows */
.shadow-neumorphic-light-sm {
box-shadow: 3px 3px 6px #b8b8b8, -3px -3px 6px #ffffff;
}
.shadow-neumorphic-light-md {
box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-light-xl {
box-shadow: 10px 10px 20px #b8b8b8, -10px -10px 20px #ffffff;
}
/* Inset light neumorphic shadows */
.shadow-neumorphic-inset-light {
box-shadow: inset 3px 3px 6px #b8b8b8, inset -3px -3px 6px #ffffff;
}
/* Base dark neumorphic shadows */
.dark .shadow-neumorphic-dark-sm {
box-shadow: 3px 3px 6px #4d4d4d, -3px -3px 6px #2d2d2d;
}
.dark .shadow-neumorphic-dark-md {
box-shadow: 5px 5px 10px #4d4d4d, -5px -5px 10px #2d2d2d;
}
.dark .shadow-neumorphic-dark-xl {
box-shadow: 10px 10px 20px #4d4d4d, -10px -10px 20px #2d2d2d;
}
/* Inset dark neumorphic shadows */
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 3px 3px 6px #4d4d4d, inset -3px -3px 6px #2d2d2d;
}
/* Override Tailwind shadow for header shadow-xl */
.shadow-xl {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.dark .shadow-xl {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
/* Hamburger menu JS to toggle content */
@media (max-width: 1023px) {
.lg\:hidden + div {
display: none;
}
.lg\:hidden + div.active {
display: block;
}
}
/* Simple JS for mobile menu and dark mode toggle */
document.addEventListener('DOMContentLoaded', () => {
const menuButton = document.querySelector('.lg\:hidden button');
const navCollapse = document.getElementById('navbar-collapse');
const darkModeToggle = document.querySelector('button[aria-label="Toggle Dark Mode"]');
// Mobile menu toggle
if (menuButton && navCollapse) {
menuButton.addEventListener('click', () => {
navCollapse.classList.toggle('hidden');
if (!navCollapse.classList.contains('hidden')) {
navCollapse.classList.add('active'); // Add active for custom CSS display
} else {
navCollapse.classList.remove('active');
}
});
}
// Dark mode toggle
if (darkModeToggle) {
darkModeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
// Save preference (optional)
if (document.documentElement.classList.contains('dark')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
// Apply saved theme on load (optional)
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
// Close dropdowns when clicking outside (basic, for demonstration)
document.addEventListener('click', (e) => {
document.querySelectorAll('.group.relative').forEach(dropdown => {
if (!dropdown.contains(e.target)) {
dropdown.querySelector('div')?.classList.remove('opacity-100', 'visible', 'scale-y->100');
dropdown.querySelector('div')?.classList.add('opacity-0', 'invisible', 'scale-y-75');
dropdown.querySelector('a svg')?.classList.remove('rotate-180');
}
});
});
// For accessibility/keyboard navigation for dropdowns (complex; basic example)
document.querySelectorAll('.group.relative > a').forEach(link => {
link.addEventListener('focus', () => {
link.parentElement.querySelector('div[role="menu"]')?.classList.add('opacity-100', 'visible', 'scale-y-100');
link.parentElement.querySelector('div[role="menu"]')?.classList.remove('opacity-0', 'invisible', 'scale-y-75');
});
link.addEventListener('blur', (event) => {
if (!link.parentElement.contains(event.relatedTarget)) {
link.parentElement.querySelector('div[role="menu"]')?.classList.remove('opacity-100', 'visible', 'scale-y-100');
link.parentElement.querySelector('div[role="menu"]')?.classList.add('opacity-0', 'invisible', 'scale-y-75');
}
});
});
});
<\/style>Composants associés
Composant de navigation collante
Composant de navigation autocollant réactif avec mode sombre
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
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.