Componente del menu dell'hamburger
Un componente di menu hamburger reattivo per blog/siti di contenuti, con modalità scura, combinazione di colori in scala di grigi ed elementi interattivi complessi esclusivamente con HTML e Tailwind CSS. Progettato per una lettura e un consumo ottimali dei contenuti.
Codice HTML
<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>Componenti correlati
Menu dell'hamburger skeuomorfo
Un componente Hamburger Menu reattivo progettato con elementi scheumorfici, colori vivaci e supporto per temi scuri per i siti di e-commerce.
Glassmorphism Hamburger Menu
Un componente per menu hamburger semplice e reattivo con design Glassmorphism, combinazione di colori complementari e supporto per la modalità scura.
Componente del menu dell'hamburger
Un componente del menu dell'hamburger reattivo progettato per l'uso nella dashboard, disegnato in un design 3D con una combinazione di colori in scala di grigi, adatto sia per temi chiari che scuri.