메가 메뉴 구성 요소 - Paper/Print Retro Crypto
종이/인쇄물에서 영감을 받은 디자인과 레트로/빈티지 색상 팔레트를 갖춘 간단하고 반응이 빠른 메가 메뉴 구성 요소로, 암호화폐 및 블록체인 애플리케이션에 적합합니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<nav class="bg-amber-50 dark:bg-zinc-800 font-serif shadow-md dark:shadow-lg transition-colors duration-300">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<a href="#" class="text-stone-800 dark:text-stone-200 text-2xl font-bold tracking-wider uppercase flex items-center">
<svg class="w-6 h-6 mr-2 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
CryptoInk
</a>
<!-- Mobile Menu Button -->
<div class="lg:hidden">
<button id="mobile-menu-button" class="text-stone-700 dark:text-stone-300 focus:outline-none focus:ring-2 focus:ring-yellow-600 rounded-md p-2">
<svg class="w-7 h-7" 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="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<!-- Desktop & Mobile Menu Content -->
<div id="mega-menu-content" class="hidden lg:flex lg:items-center lg:space-x-8 absolute lg:static top-full left-0 w-full lg:w-auto bg-amber-50 dark:bg-zinc-800 lg:bg-transparent lg:dark:bg-transparent shadow-lg lg:shadow-none transition-all duration-300 ease-out z-50 transform -translate-y-full lg:translate-y-0 text-center lg:text-left py-4 lg:py-0 border-t lg:border-t-0 border-stone-200 dark:border-zinc-700">
<ul class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 w-full">
<li>
<a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
Dashboard
</a>
</li>
<li class="relative group">
<a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent group-hover:border-yellow-600 dark:group-hover:border-yellow-400 transition-colors duration-200 text-lg flex items-center justify-center lg:justify-start">
Assets
<svg class="ml-1 w-4 h-4 hidden lg:block" 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="M19 9l-7 7-7-7"></path></svg>
</a>
<div class="lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2 lg:mt-4 lg:w-64 lg:p-6 bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl dark:shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 scale-95 group-hover:scale-100 origin-top text-left border border-amber-200 dark:border-zinc-600">
<div class="grid gap-4">
<a href="#" class="block text-stone-800 dark:text-stone-200 hover:text-yellow-700 dark:hover:text-yellow-300 text-md font-medium">
<p class="mb-1">My Portfolio</p>
<p class="text-xs text-stone-600 dark:text-stone-400">View your crypto holdings.</p>
</a>
<a href="#" class="block text-stone-800 dark:text-stone-200 hover:text-yellow-700 dark:hover:text-yellow-300 text-md font-medium">
<p class="mb-1">Transactions</p>
<p class="text-xs text-stone-600 dark:text-stone-400">Track your past trades.</p>
</a>
<a href="#" class="block text-stone-800 dark:text-stone-200 hover:text-yellow-700 dark:hover:text-yellow-300 text-md font-medium">
<p class="mb-1">Deposits/Withdrawals</p>
<p class="text-xs text-stone-600 dark:text-stone-400">Manage funds.</p>
</a>
</div>
</div>
</li>
<li>
<a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
Trade
</a>
</li>
<li>
<a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
News
</a>
</li>
<li>
<a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
Support
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Simple JavaScript for mobile menu toggle (outside of the required HTML part, for functional demo) -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('mobile-menu-button');
const menu = document.getElementById('mega-menu-content');
button.addEventListener('click', function() {
menu.classList.toggle('hidden');
menu.classList.toggle('translate-y-full'); // For initial offscreen position
menu.classList.toggle('-translate-y-full'); // For initial offscreen position
menu.classList.toggle('translate-y-0'); // For onscreen position
});
// Close menu when clicking outside on mobile
document.addEventListener('click', function(event) {
if (!menu.classList.contains('hidden') && !button.contains(event.target) && !menu.contains(event.target)) {
menu.classList.add('hidden');
menu.classList.add('-translate-y-full');
menu.classList.remove('translate-y-0');
}
});
// Close the menu when a link inside it is clicked on mobile
menu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
if (!menu.classList.contains('hidden') && window.innerWidth < 1024) { // 1024px is Tailwind's 'lg' breakpoint
menu.classList.add('hidden');
menu.classList.add('-translate-y-full');
menu.classList.remove('translate-y-0');
}
});
});
// Handle window resize to reset menu state for desktop
window.addEventListener('resize', () => {
if (window.innerWidth >= 1024) {
menu.classList.remove('hidden', '-translate-y-full', 'translate-y-0');
} else {
menu.classList.add('hidden', '-translate-y-full');
menu.classList.remove('translate-y-0');
}
});
});
</script>