Neumorphic_Mega_Menu_Weather_Climate
Un méga composant de menu réactif, de style neumorphique, pour les données météorologiques et climatiques, avec une palette de couleurs pastel et la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant Mega Menu - Rencontres/Réseaux sociaux
Un méga composant de menu simple et réactif conçu pour les plateformes de rencontres/sociales, avec des micro-interactions et une palette de couleurs violet/violet. Inclut la prise en charge du mode sombre.
Composant Mega Menu
Composant de méga menu avec interface utilisateur en mode sombre, schéma de couleurs analogue et complexité complexe à des fins de tableau de bord, à l’aide de Tailwind CSS. Il doit être réactif et prendre en charge le thème sombre en utilisant le préfixe Tailwind dark :. Aucun code JavaScript n’est nécessaire, HTML avec les classes Tailwind uniquement. Les images proviennent de picsum.photos et les avatars de randomuser.me.
Méga Menu Rétro
Un méga composant de menu de style rétro/vintage avec des effets réactifs et la prise en charge du thème sombre, mis en œuvre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus. Le mode sombre est géré uniquement avec CSS.