Neumorphic_Mega_Menu_Weather_Climate
Un mega componente de menú receptivo, de estilo Neumorphic, para datos meteorológicos y climáticos, con un esquema de color pastel y soporte para modo oscuro.
Código 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>Componentes relacionados
Mega Componente de Menú - Memphis Earth Tones Comida/Restaurante
Un mega componente de menú receptivo para sitios web de alimentos / restaurantes, inspirado en el diseño de Memphis con tonos tierra. Presenta colores llamativos, formas geométricas y patrones divertidos. Incluye soporte para modo oscuro.
Componente Mega Menú
Un componente de mega menú receptivo diseñado en una interfaz de usuario de modo oscuro con un esquema de color en escala de grises para interfaces de redes sociales.
Componente Mega Menú
Diseño minimalista / plano - Mega menú de comercio electrónico vibrante y simple con soporte para modo oscuro