Composant du menu Hamburger
Un composant de menu hamburger réactif pour les sites de blog/contenu, avec un mode sombre, une palette de couleurs en niveaux de gris et des éléments interactifs complexes uniquement avec HTML et Tailwind CSS. Conçu pour une lecture et une consommation de contenu optimales.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
<!-- Header with Hamburger Menu -->
<header class="bg-white dark:bg-gray-800 shadow-sm">
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
<!-- Logo -->
<a href="#" class="text-2xl font-bold text-gray-900 dark:text-gray-100">BlogName</a>
<!-- Hamburger Icon (Mobile) -->
<div class="lg:hidden relative" x-data="{ open: false }">
<button @click="open = !open" class="text-gray-500 dark:text-gray-400 focus:outline-none focus:text-gray-900 dark:focus:text-gray-100">
<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<!-- Mobile Menu Overlay -->
<div x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute top-12 right-0 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg py-2 z-50 transform origin-top-right">
<nav class="flex flex-col space-y-1">
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">Home</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">Categories</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">Archives</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">About</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">Contact</a>
<div class="border-t border-gray-200 dark:border-gray-700 my-2"></div>
<div x-data="{ darkMode: localStorage.theme === 'dark' ? true : false }" class="flex items-center justify-between px-4 py-2">
<span class="text-gray-700 dark:text-gray-300">Dark Mode</span>
<label for="dark-mode-toggle-mobile" class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" id="dark-mode-toggle-mobile" class="sr-only peer" :checked="darkMode" @change="darkMode = !darkMode; if (darkMode) { document.documentElement.classList.add('dark'); localStorage.theme = 'dark'; } else { document.documentElement.classList.remove('dark'); localStorage.theme = 'light'; }">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
</label>
</div>
</nav>
</div>
</div>
<!-- Desktop Menu -->
<nav class="hidden lg:flex items-center space-x-6">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">Categories</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">Archives</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">Contact</a>
<!-- Dark Mode Toggle (Desktop) -->
<div x-data="{
darkMode: localStorage.theme === 'dark' ? true : false,
init() {
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
this.darkMode = true;
} else {
document.documentElement.classList.remove('dark');
this.darkMode = false;
}
}
}" class="flex items-center">
<label for="dark-mode-toggle-desktop" class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" id="dark-mode-toggle-desktop" class="sr-only peer" :checked="darkMode" @change="darkMode = !darkMode; if (darkMode) { document.documentElement.classList.add('dark'); localStorage.theme = 'dark'; } else { document.documentElement.classList.remove('dark'); localStorage.theme = 'light'; }">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Dark Mode</span>
</label>
</div>
</nav>
</div>
</header>
<!-- Main Content Area (Example) -->
<main class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-extrabold mb-6">Welcome to Our Blog</h1>
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Blog Post Card 1 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/400/250" alt="Blog Post Image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">The Art of Minimalist Design</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Discover how less can be more in web design and daily life, embracing simplicity and function.</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
</div>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
</div>
</div>
</article>
<!-- Blog Post Card 2 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/400/251" alt="Blog Post Image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Exploring the Mountains: A Journey</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">An adventurous tale of conquering peaks and finding peace in nature's grandeur.</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300 text-sm">Jane Smith</span>
</div>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
</div>
</div>
</article>
<!-- Blog Post Card 3 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/400/252" alt="Blog Post Image" class="w-full h-48 object-cover">
<div class="p-6">
<h2 class="text-xl font-semibold mb-2">Future of AI: Ethics and Innovation</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Delving into the complex ethical dilemmas and exciting innovations in artificial intelligence.</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300 text-sm">Mike Johnson</span>
</div>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
</div>
</div>
</article>
</section>
</main>
<!-- Footer (Example) -->
<footer class="bg-gray-200 dark:bg-gray-800 py-6 mt-8">
<div class="container mx-auto px-4 text-center text-gray-600 dark:text-gray-400">
<p>© 2023 BlogName. All rights reserved.</p>
</div>
</footer>
</div>
<!-- Alpine.js for menu toggle and dark mode persistence -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script>
// Initial dark mode setup (outside Alpine.js for page load)
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>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.
Composant de menu Hamburger rétro
Composant de menu complexe de hamburger rétro / vintage avec une palette de couleurs analogue, un design réactif et une prise en charge du thème sombre.
Skeuomorphic Hamburger Menu
Un composant de menu hamburger réactif conçu avec des éléments skeuomorphes, des couleurs vives et une prise en charge du thème sombre pour les sites de commerce électronique.