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.
HTML Code
<div class="relative flex flex-col items-center bg-gray-800 min-h-screen p-4 dark:bg-gray-900">
<button class="hamburger flex items-center justify-center w-10 h-10 bg-white bg-opacity-30 backdrop-blur-md rounded-full shadow-lg hover:bg-opacity-50 dark:bg-gray-700 dark:hover:bg-opacity-50">
<span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
<span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
<span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
</button>
<nav class="absolute left-0 top-12 w-64 bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg transition-transform duration-300 ease-in-out transform -translate-x-full group-hover:translate-x-0 dark:bg-gray-700">
<div class="flex flex-col p-4">
<a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Home</a>
<a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">About</a>
<a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Portfolio</a>
<a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Contact</a>
</div>
</nav>
<div class="mt-5 w-full flex justify-center">
<img src="https://picsum.photos/200/300" alt="Portfolio Item" class="rounded-lg shadow-lg">
</div>
<div class="mt-5 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white bg-opacity-90 shadow-lg">
<p class="ml-2 text-white">John Doe</p>
</div>
</div>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.
Brutalisme Hamburger Menu
Composant de menu Hamburger inspiré du brutalisme pour le tableau de bord avec une palette de couleurs analogue, une complexité modérée, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript.
Composant du menu Hamburger
Un composant de menu hamburger réactif au design minimaliste / plat adapté aux sites Web d’entreprise / d’entreprise, utilisant une palette de couleurs pastel et prenant en charge le mode sombre.