Hamburger Menu 컴포넌트
블로그/콘텐츠 사이트를 위한 반응형 햄버거 메뉴 구성 요소로, 다크 모드, 회색조 색 구성표 및 HTML 및 Tailwind CSS만을 사용하는 복잡한 대화형 요소를 제공합니다. 최적의 읽기 및 콘텐츠 소비를 위해 설계되었습니다.
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>관련 구성 요소
Industrial_Agriculture_Hamburger_Menu
농업/농업 웹사이트를 위해 설계된 따뜻한 '일몰' 색 구성표가 있는 복잡한 산업 테마의 햄버거 메뉴 구성 요소입니다. 노출된 요소, 원료 미학 및 여러 대화형 요소를 특징으로 하며 다크 모드 지원으로 완벽하게 반응합니다.
Hamburger Menu 컴포넌트
대시보드용으로 설계된 반응형 햄버거 메뉴 구성 요소로, 밝은 테마와 어두운 테마 모두에 적합한 그레이스케일 색상 구성표의 3D 디자인 스타일입니다.