Glassmorphism Navigation latérale
Un composant de navigation de barre latérale réactif avec un design Glassmorphism, la prise en charge du mode sombre et l’utilisation de Tailwind CSS. Comporte des éléments translucides givrés ressemblant à du verre avec des effets de flou.
HTML Code
```html
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Backdrop -->
<div id="sidebarBackdrop" class="fixed inset-0 z-10 bg-black opacity-0 md:hidden" onclick="closeSidebar()"></div>
<!-- Sidebar -->
<div id="sidebar" class="w-64 space-y-6 py-7 px-2 fixed inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition duration-200 ease-in-out z-20
bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-10 backdrop-filter backdrop-blur-lg dark:text-white text-gray-900">
<!-- Logo -->
<a class="text-white flex items-center space-x-2 px-4" href="#">
<svg class="w-8 h-8" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.024 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.024 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.024 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.024 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.024 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.516.315 1.208.1 1.724-.51z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
<span class="text-2xl font-extrabold">TailwindCSS</span>
</a>
<!-- Nav -->
<nav>
<a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Home</a>
<a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">About</a>
<a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Services</a>
<a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Contact</a>
</nav>
</div>
<!-- Content -->
<div class="flex-1 p-10 text-2xl font-bold">
<button onclick="openSidebar()" class="md:hidden text-gray-500 dark:text-gray-400 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>
Content goes here...
</div>
</div>
<style>
/* For Glassmorphism effect in dark mode */
.dark .backdrop-blur-lg {
backdrop-filter: blur(16px);
}
/* For Glassmorphism effect in light mode */
.backdrop-blur-lg {
backdrop-filter: blur(16px);
}
</style>
<script>
function openSidebar() {
document.getElementById('sidebar').classList.remove('-translate-x-full');
document.getElementById('sidebarBackdrop').classList.remove('opacity-0');
document.getElementById('sidebarBackdrop').classList.add('opacity-50');
}
function closeSidebar() {
document.getElementById('sidebar').classList.add('-translate-x-full');
document.getElementById('sidebarBackdrop').classList.remove('opacity-50');
document.getElementById('sidebarBackdrop').classList.add('opacity-0');
}
</script>
```Composants associés
Organic_Nature_Sepia_Healthcare_Sidebar_Navigation_Component
Un composant de navigation latéral simple et réactif avec un design organique, inspiré de la nature, utilisant des tons sépia/brun, adapté aux applications médicales et de soins de santé. Inclut la prise en charge du mode sombre.
Navigation dans la barre latérale du commerce électronique
Un composant de navigation de barre latérale simple et réactif pour les sites Web de commerce électronique, doté d’un schéma de couleurs triadique, de micro-interactions au survol et de la prise en charge du mode sombre, conçu avec Tailwind CSS.
Glassmorphism Navigation latérale
Un composant de navigation latérale réactif de style Glassmorphism pour les portfolios, avec prise en charge du mode sombre et un schéma de couleurs analogue. Comprend des effets de verre dépoli et plusieurs éléments interactifs utilisant uniquement HTML et Tailwind CSS.