Composant du menu Hamburger
Un composant de menu de hamburger complexe, inspiré du papier/de l’impression avec des couleurs bonbons/sucrées, conçu pour les sites Web gouvernementaux/de services publics. Dispose d’un design réactif avec prise en charge du mode sombre, imitant le papier physique et les éléments d’impression avec des couleurs vives et gaies.
HTML Code
<div class="font-sans bg-amber-50 dark:bg-zinc-800 text-slate-800 dark:text-zinc-50 min-h-screen relative">
<!-- Main Content Area (for demonstration) -->
<div class="p-8 md:p-12 lg:p-16 flex flex-col items-center justify-center min-h-screen">
<h1 class="text-3xl md:text-5xl lg:text-6xl font-extrabold text-pink-700 dark:text-pink-400 mb-4 text-center leading-tight tracking-tight drop-shadow-md">
Public Service Portal
</h1>
<p class="text-lg md:text-xl text-center max-w-2xl text-lime-700 dark:text-lime-300 mb-8">
Your trusted source for government information and public services. Explore our resources.
</p>
<img src="https://picsum.photos/seed/public/800/450" alt="Placeholder Image" class="rounded-lg shadow-xl mb-8 border-4 border-l-rose-300 border-t-purple-300 border-r-mint-300 border-b-yellow-300 dark:border-l-rose-600 dark:border-t-purple-600 dark:border-r-emerald-600 dark:border-b-yellow-600 max-w-full h-auto">
<button class="px-8 py-4 bg-gradient-to-br from-pink-500 to-rose-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 text-lg md:text-xl
border-2 border-pink-700 dark:border-purple-300
relative overflow-hidden group">
<span class="absolute inset-0 bg-gradient-to-br from-pink-600 to-rose-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span class="relative z-10">Learn More</span>
</button>
</div>
<!-- Hamburger Menu Button -->
<input type="checkbox" id="menu-toggle" class="hidden peer">
<label for="menu-toggle" class="fixed top-4 right-4 z-50 p-3 bg-gradient-to-br from-purple-400 to-indigo-500 dark:from-purple-700 dark:to-indigo-800 rounded-full shadow-lg cursor-pointer transition-transform duration-300 hover:scale-105 active:scale-95
border-2 border-purple-600 dark:border-indigo-600
flex flex-col items-center justify-center group w-14 h-14">
<span class="block w-8 h-1 bg-white rounded-full transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:rotate-45 peer-checked:translate-y-2"></span>
<span class="block w-8 h-1 bg-white rounded-full my-1 transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:opacity-0"></span>
<span class="block w-8 h-1 bg-white rounded-full transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:-rotate-45 peer-checked:-translate-y-2"></span>
</label>
<!-- Offcanvas Menu Overlay -->
<div class="fixed inset-0 bg-black/40 dark:bg-black/80 backdrop-blur-sm z-40 opacity-0 pointer-events-none peer-checked:opacity-100 peer-checked:pointer-events-auto transition-opacity duration-500"></div>
<!-- Offcanvas Menu Content -->
<nav class="fixed top-0 right-0 h-full w-full max-w-xs md:max-w-sm lg:max-w-md bg-gradient-to-br from-pink-100 to-purple-100 dark:from-zinc-700 dark:to-stone-700 shadow-2xl transform translate-x-full peer-checked:translate-x-0 transition-transform duration-500 ease-in-out z-50
p-6 md:p-8 overflow-y-auto
border-l-4 border-t-4 border-b-4 border-r-4
border-l-pink-400 border-t-purple-400 border-b-green-400 border-r-yellow-400
dark:border-l-pink-700 dark:border-t-purple-700 dark:border-b-emerald-700 dark:border-r-yellow-700
rounded-bl-3xl border-dashed">
<div class="text-center mb-8 pb-4 border-b border-rose-300 dark:border-rose-600 relative">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-lime-300 dark:border-lime-500 shadow-md transform -rotate-3 hover:rotate-0 hover:scale-110 transition-all duration-300">
<h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 tracking-wide">Welcome!</h2>
<p class="text-sm text-gray-600 dark:text-gray-300">Citizen Services</p>
<!-- Paper Clip Effect -->
<div class="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-12 bg-gray-300 dark:bg-gray-600 rounded-b-lg shadow-inner z-0
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-4 before:bg-gradient-to-b before:from-gray-400 before:to-gray-300 dark:before:from-gray-700 dark:before:to-gray-600 before:rounded-t-lg
after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-4 after:h-4 after:rounded-full after:bg-gray-500 dark:after:bg-gray-800 after:shadow-md"></div>
<!-- Staple Effect -->
<div class="absolute top-1/2 left-4 -translate-y-1/2 w-3 h-3 bg-gray-400 dark:bg-gray-500 border border-gray-500 dark:border-gray-600 rotate-45 shadow-sm"></div>
<div class="absolute top-1/2 right-4 -translate-y-1/2 w-3 h-3 bg-gray-400 dark:bg-gray-500 border border-gray-500 dark:border-gray-600 rotate-45 shadow-sm"></div>
</div>
<ul class="space-y-4 md:space-y-5">
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-rose-200 dark:hover:bg-zinc-600 transition-all duration-200 group
border-2 border-transparent hover:border-pink-300 dark:hover:border-pink-600
relative overflow-hidden">
<span class="absolute inset-0 bg-rose-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<svg class="w-6 h-6 mr-3 text-pink-600 dark:text-pink-400 group-hover:text-pink-800 dark:group-hover:text-pink-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h2a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V9a7 7 0 00-14 0v2z"></path>
</svg>
<span class="text-lg font-medium text-pink-800 dark:text-pink-200 group-hover:text-pink-900 dark:group-hover:text-pink-100 relative z-10">Home</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-purple-200 dark:hover:bg-zinc-600 transition-all duration-200 group
border-2 border-transparent hover:border-purple-300 dark:hover:border-purple-600
relative overflow-hidden">
<span class="absolute inset-0 bg-purple-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<svg class="w-6 h-6 mr-3 text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
<span class="text-lg font-medium text-purple-800 dark:text-purple-200 group-hover:text-purple-900 dark:group-hover:text-purple-100 relative z-10">Services</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-lime-200 dark:hover:bg-zinc-600 transition-all duration-200 group
border-2 border-transparent hover:border-lime-300 dark:hover:border-emerald-600
relative overflow-hidden">
<span class="absolute inset-0 bg-lime-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<svg class="w-6 h-6 mr-3 text-lime-600 dark:text-lime-400 group-hover:text-lime-800 dark:group-hover:text-lime-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10M7 16h10M9 17v-1.5a2.5 2.5 0 015 0V17c0 .733-.24 1.42-.697 1.984l-.066.079a4.524 4.524 0 01-6.495 0l-.066-.079A3.013 3.013 0 006 17v-1.5a2.5 2.5 0 015 0V17c0 .733-.24 1.42-.697 1.984l-.066.079a4.524 4.524 0 01-6.495 0l-.066-.079A3.013 3 0 006 17v-1.5a2.5 2.5 0 015 0V17z"></path>
</svg>
<span class="text-lg font-medium text-lime-800 dark:text-lime-200 group-hover:text-lime-900 dark:group-hover:text-lime-100 relative z-10">News & Updates</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-zinc-600 transition-all duration-200 group
border-2 border-transparent hover:border-yellow-300 dark:hover:border-yellow-600
relative overflow-hidden">
<span class="absolute inset-0 bg-yellow-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<svg class="w-6 h-6 mr-3 text-yellow-600 dark:text-yellow-400 group-hover:text-yellow-800 dark:group-hover:text-yellow-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586L6 18H4a2 2 0 01-2-2V6a2 2 0 012-2h12a2 2 0 012 2v2z"></path>
</svg>
<span class="text-lg font-medium text-yellow-800 dark:text-yellow-200 group-hover:text-yellow-900 dark:group-hover:text-yellow-100 relative z-10">Contact Us</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-200 dark:hover:bg-zinc-600 transition-all duration-200 group
border-2 border-transparent hover:border-indigo-300 dark:hover:border-indigo-600
relative overflow-hidden">
<span class="absolute inset-0 bg-indigo-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<svg class="w-6 h-6 mr-3 text-indigo-600 dark:text-indigo-400 group-hover:text-indigo-800 dark:group-hover:text-indigo-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-lg font-medium text-indigo-800 dark:text-indigo-200 group-hover:text-indigo-900 dark:group-hover:text-indigo-100 relative z-10">About Us</span>
</a>
</li>
</ul>
<!-- Decorative elements mimicking torn paper edge -->
<div class="absolute bottom-0 left-0 w-full h-8 bg-gradient-to-t from-pink-200/50 to-transparent dark:from-zinc-800/50 dark:to-transparent pointer-events-none
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-stripes-gradient before:bg-[length:16px_16px] before:-skew-y-1
after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-4 after:bg-pink-100 dark:after:bg-zinc-700"></div>
<!-- Sticky Note Section -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 w-48 p-4 bg-yellow-200 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 rounded-lg shadow-lg rotate-3 hover:rotate-0 transition-transform duration-300
border-2 border-yellow-300 dark:border-yellow-600
flex flex-col items-center justify-center text-center mt-8">
<p class="text-sm font-semibold mb-2">Important Notice!</p>
<p class="text-xs">Upcoming policy changes effective Jan 1, 2024. Stay informed!</p>
<div class="absolute -top-3 left-1/2 -translate-x-1/2 w-6 h-6 bg-red-400 dark:bg-red-600 rounded-full shadow-md border-2 border-red-500 dark:border-red-700 transform rotate-12"></div>
</div>
</nav>
</div>
<style>
/* Define the custom stripes gradient for torn paper effect */
.bg-stripes-gradient {
background-image: linear-gradient(135deg,
var(--tw-gradient-stops,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.1) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.1) 75%,
transparent 75%,
transparent 100%
)
);
background-size: 16px 16px;
}
/* Dark mode adjustments for stripes */
.dark .bg-stripes-gradient {
background-image: linear-gradient(135deg,
var(--tw-gradient-stops,
rgba(0, 0, 0, 0.1) 0%,
rgba(0, 0, 0, 0.1) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.1) 75%,
transparent 75%,
transparent 100%
)
);
}
</style>Composants associés
Industrial_Agriculture_Hamburger_Menu
Un composant de menu de hamburger complexe, à thème industriel, avec une palette de couleurs chaudes « coucher de soleil », conçu pour les sites Web d’agriculture. Comprend des éléments exposés, une esthétique de matière première et de multiples éléments interactifs, entièrement réactifs avec prise en charge du mode 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.
Composant du menu Hamburger
Un composant de menu Hamburger réactif conçu dans le style Brutalism à l’aide de Tailwind CSS, avec prise en charge du mode sombre et des espaces réservés pour les images et les avatars.