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.
HTML Code
<nav class="bg-white dark:bg-gray-800 p-4 rounded shadow">
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-gray-800 dark:text-white">
Logo
</div>
<button id="menu-toggle" class="text-gray-800 dark:text-white focus:outline-none">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
</svg>
</button>
</div>
<div id="menu" class="hidden mt-4">
<ul class="flex flex-col space-y-2">
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a></li>
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
</ul>
</div>
</nav>
<style>
@media (min-width: 768px) {
#menu {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 0;
}
#menu-toggle {
display: none;
}
}
</style>Composants associés
Glassmorphism Hamburger Menu
Un composant de menu hamburger simple et réactif avec un design Glassmorphism, une palette de couleurs complémentaires et une prise en charge du mode sombre.
Composant de menu Hamburger 3D
Un menu de hamburger réactif avec un design 3D incorporant une palette de couleurs triadique et des éléments interactifs complexes pour les sites Web d’entreprise.
Composant du menu Hamburger
Un composant de menu hamburger réactif conçu avec un style 3D, adapté aux besoins du tableau de bord. Il intègre une palette de couleurs triadique et possède une interface complexe avec des éléments interactifs, prenant en charge les thèmes clairs et sombres.