Neumorphic_Mega_Menu_Weather_Climate
Un mega componente di menu reattivo in stile neumorfico per i dati meteorologici e climatici, con una combinazione di colori pastello e supporto per la modalità scura.
Codice 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>Componenti correlati
Componente Mega Menu
Componente Mega Menu con design minimalista/piatto, combinazione di colori vivaci, livello di complessità complesso, per scopi di dashboard, utilizzando Tailwind CSS. Design reattivo con supporto per temi scuri. Nessun codice JavaScript, solo HTML con le classi Tailwind. La modalità oscura utilizza il prefisso dark: di Tailwind per lo stile. Le immagini utilizzano picsum.photos e randomuser.me per gli avatar.
Componente Mega Menu
Un componente Mega Menu reattivo progettato nell'interfaccia utente in modalità oscura con una combinazione di colori in scala di grigi per le interfacce dei social media.
Componente Mega Menu
Componente Mega Menu con Material Design, combinazione di colori triadica, livello complesso, per scopi Dashboard, reattivo con supporto per temi scuri.