Neumorphic_Mega_Menu_Weather_Climate
날씨 및 기후 데이터를 위한 반응형 뉴모픽 스타일의 메가 메뉴 구성 요소로, 파스텔 색조 구성표와 다크 모드 지원을 특징으로 합니다.
HTML 코드
<nav class="bg-blue-100 dark:bg-gray-800 font-sans relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<a href="#" class="text-blue-600 dark:text-blue-300 text-2xl font-bold tracking-tight">
<svg class="h-8 w-8 inline-block mr-2" 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 15a4 4 0 004 4h9a5 5 0 005-5V7a2 2 0 00-2-2H5a2 2 0 00-2 2v8z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01"></path></svg>
ClimateCast
</a>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center">
<div class="relative group">
<button class="text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 px-3 py-2 rounded-md text-sm font-medium
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
group-hover:translate-y-px group-hover:shadow-neumorphic-inset-light dark:group-hover:shadow-neumorphic-inset-dark
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
relative">
Forecasts
<svg class="ml-2 -mr-0.5 h-4 w-4 inline-block transform group-hover:rotate-180 transition-transform duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div class="absolute hidden group-hover:block z-50 mt-3 w-max rounded-lg p-6
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
transition-all duration-300 ease-out origin-top-left">
<div class="grid grid-cols-2 gap-y-4 gap-x-8">
<div>
<h3 class="text-blue-600 dark:text-blue-300 text-lg font-bold mb-2 pb-1 border-b border-blue-200 dark:border-gray-700">Daily Forecasts</h3>
<a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
hover:translate-x-1 transition-transform duration-200">
Today's Weather
</a>
<a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
hover:translate-x-1 transition-transform duration-200">
7-Day Outlook
</a>
<a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
hover:translate-x-1 transition-transform duration-200">
Hourly Breakdown
</a>
</div>
<div>
<h3 class="text-blue-600 dark:text-blue-300 text-lg font-bold mb-2 pb-1 border-b border-blue-200 dark:border-gray-700">Specialized</h3>
<a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
hover:translate-x-1 transition-transform duration-200">
Marine Weather
</a>
<a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
hover:translate-x-1 transition-transform duration-200">
Aviation Weather
</a>
<a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
hover:translate-x-1 transition-transform duration-200">
Agriculture Weather
</a>
</div>
<div class="col-span-2">
<h3 class="text-blue-600 dark:text-blue-300 text-lg font-bold mb-2 pb-1 border-b border-blue-200 dark:border-gray-700">Global Insights</h3>
<div class="grid grid-cols-3 gap-2">
<a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
hover:translate-x-1 transition-transform duration-200">
Europe
</a>
<a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
hover:translate-x-1 transition-transform duration-200">
Americas
</a>
<a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
hover:translate-x-1 transition-transform duration-200">
Asia
</a>
<a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
hover:translate-x-1 transition-transform duration-200">
Africa
</a>
<a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
hover:translate-x-1 transition-transform duration-200">
Oceania
</a>
<a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
hover:translate-x-1 transition-transform duration-200">
Antarctica
</a>
</div>
</div>
<div class="col-span-2 p-4 rounded-md shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<p class="text-blue-700 dark:text-gray-300 text-xs italic">"Always be prepared. Knowing the forecast is the first step."</p>
</div>
</div>
</div>
</div>
<a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 px-3 py-2 rounded-md text-sm font-medium ml-4
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Climate Data
</a>
<a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 px-3 py-2 rounded-md text-sm font-medium ml-4
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Maps & Radar
</a>
<a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 px-3 py-2 rounded-md text-sm font-medium ml-4
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Resources
</a>
</div>
<div class="flex items-center md:hidden">
<!-- Mobile menu button -->
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-blue-700 dark:text-blue-300
hover:text-blue-900 dark:hover:text-blue-100 bg-blue-100 dark:bg-gray-800
shadow-neumorphic-light dark:shadow-neumorphic-dark
focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500
data-[state=open]:translate-y-px data-[state=open]:shadow-neumorphic-inset-light dark:data-[state=open]:shadow-neumorphic-inset-dark
transition-all duration-300 ease-in-out" aria-controls="mobile-menu" aria-expanded="false" data-state="closed">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6 block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg class="h-6 w-6 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="hidden md:hidden absolute w-full top-16 left-0 z-40 p-4
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<div class="relative group block">
<button class="w-full text-left text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 block px-3 py-2 rounded-md text-base font-medium
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
group-hover:translate-y-px group-hover:shadow-neumorphic-inset-light dark:group-hover:shadow-neumorphic-inset-dark
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
flex items-center justify-between" data-mobile-submenu-toggle>
Forecasts
<svg class="ml-2 -mr-0.5 h-4 w-4 inline-block transform group-data-[state=open]:rotate-180 transition-transform duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div class="hidden mt-2 ml-4 space-y-1 data-[state=open]:block" data-mobile-submenu>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
hover:translate-y-px transition-all duration-200">
Today's Weather
</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
hover:translate-y-px transition-all duration-200">
7-Day Outlook
</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
hover:translate-y-px transition-all duration-200">
Hourly Breakdown
</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
hover:translate-y-px transition-all duration-200">
Marine Weather
</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
hover:translate-y-px transition-all duration-200">
Aviation Weather
</a>
</div>
</div>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300 ease-in-out">
Climate Data
</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300 ease-in-out">
Maps & Radar
</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100
bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
transition-all duration-300 ease-in-out">
Resources
</a>
</div>
</div>
</nav>
<!-- Custom Styles for Neumorphism -->
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #9ec2e6, -6px -6px 12px #c2e6ff; /* Soft pastel blue base */
}
.shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #3a3a3a;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 4px 4px 8px #9ec2e6, inset -4px -4px 8px #c2e6ff;
}
.shadow-neumorphic-inset-dark {
box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #3a3a3a;
}
/* Override Tailwind's default display for custom behavior */
.group:hover .group-hover\:block {
display: block;
}
.group-hover\:translate-y-px {
transform: translateY(1px);
}
.hover\:translate-y-px:hover {
transform: translateY(1px);
}
/* Mobile menu specific handling (requires JS to toggle classes) */
.md\:hidden [aria-expanded='false'] + svg {
display: block;
}
.md\:hidden [aria-expanded='true'] + svg {
display: none;
}
.md\:hidden [aria-expanded='true'] {
border-radius: 0.375rem; /* rounded-md */
transform: translateY(1px);
box-shadow: inset 4px 4px 8px #9ec2e6, inset -4px -4px 8px #c2e6ff; /* shadow-neumorphic-inset-light */
}
.dark .md\:hidden [aria-expanded='true'] {
box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #3a3a3a; /* shadow-neumorphic-inset-dark */
}
[data-state="closed"] + svg:first-of-type {
display: block;
}
[data-state="open"] + svg:first-of-type {
display: none;
}
[data-state="closed"] + svg:last-of-type {
display: none;
}
[data-state="open"] + svg:last-of-type {
display: block;
}
/* For mobile submenu toggling */
[data-mobile-submenu-toggle][data-state="open"] + svg {
display: block; /* The arrow */
transform: rotate(180deg);
}
[data-mobile-submenu-toggle][data-state="closed"] + svg {
transform: rotate(0deg);
}
[data-mobile-submenu][data-state="open"] {
display: block;
}
</style>
<!-- Minimal JavaScript for mobile menu and submenu functionality -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', () => {
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
mobileMenuButton.setAttribute('aria-expanded', String(!isExpanded));
mobileMenuButton.setAttribute('data-state', isExpanded ? 'closed' : 'open');
mobileMenu.classList.toggle('hidden', isExpanded);
// Toggle the hamburger/close icon
mobileMenuButton.querySelector('svg:first-of-type').classList.toggle('hidden', !isExpanded);
mobileMenuButton.querySelector('svg:last-of-type').classList.toggle('hidden', isExpanded);
});
}
const mobileSubmenuToggles = document.querySelectorAll('[data-mobile-submenu-toggle]');
mobileSubmenuToggles.forEach(toggle => {
toggle.setAttribute('data-state', 'closed'); // Initialize state
toggle.addEventListener('click', () => {
const submenu = toggle.nextElementSibling; // Get the corresponding submenu div
if (submenu && submenu.hasAttribute('data-mobile-submenu')) {
const isExpanded = toggle.getAttribute('data-state') === 'open';
toggle.setAttribute('data-state', isExpanded ? 'closed' : 'open');
submenu.classList.toggle('hidden', isExpanded);
submenu.setAttribute('data-state', isExpanded ? 'closed' : 'open');
}
});
});
});
</script>관련 구성 요소
메가 메뉴 구성 요소 - 숲/녹색, 미시적 상호 작용, 비영리
비영리/자선 웹사이트를 위해 설계된 반응형 메가 메뉴 구성 요소로, 숲/녹색 색상 팔레트, 호버링의 마이크로 인터랙션, 완전한 다크 모드 지원을 특징으로 합니다. '우리의 사명', '우리가 돕는 방법', '이벤트 및 뉴스', '참여하기'에 대한 섹션을 제공합니다.