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.
HTML Code
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Backdrop -->
<div id="sidebarBackdrop" class="fixed inset-0 z-40 lg:hidden transition-opacity duration-300 ease-linear opacity-0 pointer-events-none bg-black bg-opacity-25"></div>
<!-- Sidebar -->
<div id="sidebar" class="fixed inset-y-0 left-0 z-50 w-64 bg-white/20 dark:bg-gray-800/20 backdrop-filter backdrop-blur-lg border-r border-white/30 dark:border-gray-700/30 transform -translate-x-full lg:translate-x-0 lg:static lg:inset-0 transition-transform duration-300 ease-in-out">
<div class="flex items-center justify-center h-20 border-b border-white/30 dark:border-gray-700/30">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Portfolio</h1>
</div>
<nav class="flex-1 px-2 py-4 space-y-2">
<a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
Home
</a>
<a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
About
</a>
<a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
Projects
</a>
<a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
Contact
</a>
</nav>
<div class="absolute bottom-0 left-0 w-full p-4 border-t border-white/30 dark:border-gray-700/30">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div class="text-sm">
<p class="font-semibold text-gray-800 dark:text-white">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Web Developer</p>
</div>
</div>
</div>
</div>
<!-- Content Area (for demonstration) -->
<div class="flex-1 p-10">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white">Main Content</h1>
<p class="mt-4 text-gray-600 dark:text-gray-400">This is the main content area. The sidebar is on the left.</p>
</div>
</div>Composants associés
Glassmorphism Sidebar Navigation Component
Un composant de navigation de la barre latérale de style Glassmorphism pour les blogs, avec une palette de couleurs monochromatiques. Il s’agit d’un design simple et réactif avec prise en charge du mode sombre, utilisant uniquement HTML et Tailwind CSS. La barre latérale comprend un titre de site, des liens de navigation et une section de profil.
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.
Gaming_Sidebar_Navigation_Component
Un composant de navigation latéral réactif pour les sites Web de jeux, doté d’un design monospace/inspiré des développeurs avec un contraste élevé, une prise en charge du mode sombre et des éléments interactifs. Idéal pour les interfaces de jeu et les portails communautaires.