Composant du menu Hamburger
Un menu hamburger réactif conçu pour les interfaces de médias sociaux avec un thème en mode sombre et une palette de couleurs complémentaire.
HTML Code
<div class="lg:hidden">
<div class="flex items-center justify-between p-5 bg-gray-900 text-white">
<div class="text-2xl font-bold">SocialApp</div>
<button id="menu-toggle" class="focus:outline-none">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div id="menu" class="absolute top-0 left-0 w-full h-full bg-gray-800 opacity-0 pointer-events-none transition-opacity duration-300 ease-in-out">
<div class="flex flex-col items-center justify-center h-full space-y-5 text-xl text-white">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full border-2 border-indigo-500">
<a href="#" class="hover:text-indigo-300 transition duration-300">Home</a>
<a href="#" class="hover:text-indigo-300 transition duration-300">Profile</a>
<a href="#" class="hover:text-indigo-300 transition duration-300">Messages</a>
<a href="#" class="hover:text-indigo-300 transition duration-300">Settings</a>
</div>
</div>
</div>
<style>
#menu-toggle:focus + #menu {
opacity: 1;
pointer-events: auto;
}
</style>Composants associés
Composant du menu Hamburger
Un composant de menu hamburger complexe, réactif et dynamique avec des micro-interactions pour le commerce électronique, avec une navigation coulissante, des liens de catégorie, une barre de recherche et des icônes de médias sociaux. Il prend en charge le mode sombre et utilise Lorem Picsum pour les images.
Menu du Hamburger brutaliste
Menu de hamburgers de style brutaliste avec des couleurs vives et une prise en charge du mode sombre, conçu pour un blog ou un site de contenu.
Composant du menu Hamburger
Un composant complexe de menu de hamburger réactif avec un design glassmorphism, avec un effet translucide semblable à du verre givré, adapté à un portfolio présentant des travaux ou des produits. Il comprend un support de thème sombre et utilise Tailwind CSS pour le style.