Componente de navegación pegajoso - Pastel neumórfico
Un componente de navegación complejo y pegajoso con un estilo de diseño de neumorfismo y un esquema de color pastel, adecuado para documentación o sitios wiki. Cuenta con elementos de navegación anidados, una barra de búsqueda y compatibilidad con el modo oscuro, todo implementado con HTML y Tailwind CSS para una capacidad de respuesta completa.
Código HTML
<header class="sticky top-0 z-50 bg-gray-100 p-4 shadow-xl dark:bg-gray-800 transition-colors duration-300 md:px-8">
<nav class="container mx-auto flex items-center justify-between flex-wrap">
<div class="flex items-center flex-shrink-0 text-gray-800 dark:text-gray-200 mr-6">
<a href="#" class="font-bold text-2xl tracking-tight text-pink-500 dark:text-purple-400 drop-shadow-md">Doc<span class="text-blue-400 dark:text-teal-300">Wiki</span></a>
</div>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-400 hover:text-gray-900 hover:border-gray-900 dark:text-gray-400 dark:border-gray-500 dark:hover:text-gray-100 dark:hover:border-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 group">
<svg class="fill-current h-3 w-3 group-hover:text-blue-500 dark:group-hover:text-teal-400" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
</button>
</div>
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden transition-all duration-300 ease-in-out" id="navbar-collapse">
<ul class="text-sm lg:flex-grow lg:flex lg:justify-end lg:items-center">
<li class="relative group lg:mr-6 mt-4 lg:mt-0">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl
shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark"
tabindex="0">
Features
<svg class="h-4 w-4 inline-block ml-1 group-hover:rotate-180 transition-transform duration-200" 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:top-full lg:left-0 lg:w-48 bg-gray-100 dark:bg-gray-700 rounded-xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl mt-2 lg:mt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform lg:origin-top-left scale-y-75 group-hover:scale-y-100">
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Overview</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">API Reference</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Integrations</a>
</div>
</li>
<li class="relative group lg:mr-6 mt-4 lg:mt-0">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl
shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark"
tabindex="0">
Guides
<svg class="h-4 w-4 inline-block ml-1 group-hover:rotate-180 transition-transform duration-200" 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:top-full lg:left-0 lg:w-48 bg-gray-100 dark:bg-gray-700 rounded-xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl mt-2 lg:mt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform lg:origin-top-left scale-y-75 group-hover:scale-y-100">
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Getting Started</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Best Practices</a>
<a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Troubleshooting</a>
</div>
</li>
<li class="lg:mr-6 mt-4 lg:mt-0">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl
shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">
Community
</a>
</li>
<li class="lg:mr-6 mt-4 lg:mt-0">
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl
shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">
Blog
</a>
</li>
</ul>
<div class="mt-4 lg:mt-0 flex items-center">
<div class="relative w-full lg:max-w-xs">
<input type="search" placeholder="Search..." class="block w-full pl-10 pr-4 py-2 rounded-full text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 border-none
shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-teal-500 transition-all duration-200 placeholder-gray-500 dark:placeholder-gray-400">
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400">
<svg class="h-5 w-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
</div>
<button class="ml-4 p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300
shadow-neumorphic-light-md dark:shadow-neumorphic-dark-md
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark
hover:text-blue-500 dark:hover:text-teal-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 transition-all duration-200">
<svg class="h-5 w-5" 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="M12 3v1m0 16v1m9-9h1M3 12H2m8.058-9.058l1.414-1.414M12.942 21.058l-1.414 1.414M21.058 12.942l-1.414 1.414M2.942 11.058l1.414-1.414M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"></path></svg>
<span class="sr-only">Toggle Dark Mode</span>
</button>
<a href="#" class="ml-4 p-1 rounded-full
shadow-neumorphic-light-md dark:shadow-neumorphic-dark-md
active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark
transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<span class="sr-only">User Profile</span>
</a>
</div>
</div>
</nav>
</header>
<style>
/* Base light neumorphic shadows */
.shadow-neumorphic-light-sm {
box-shadow: 3px 3px 6px #b8b8b8, -3px -3px 6px #ffffff;
}
.shadow-neumorphic-light-md {
box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-light-xl {
box-shadow: 10px 10px 20px #b8b8b8, -10px -10px 20px #ffffff;
}
/* Inset light neumorphic shadows */
.shadow-neumorphic-inset-light {
box-shadow: inset 3px 3px 6px #b8b8b8, inset -3px -3px 6px #ffffff;
}
/* Base dark neumorphic shadows */
.dark .shadow-neumorphic-dark-sm {
box-shadow: 3px 3px 6px #4d4d4d, -3px -3px 6px #2d2d2d;
}
.dark .shadow-neumorphic-dark-md {
box-shadow: 5px 5px 10px #4d4d4d, -5px -5px 10px #2d2d2d;
}
.dark .shadow-neumorphic-dark-xl {
box-shadow: 10px 10px 20px #4d4d4d, -10px -10px 20px #2d2d2d;
}
/* Inset dark neumorphic shadows */
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 3px 3px 6px #4d4d4d, inset -3px -3px 6px #2d2d2d;
}
/* Override Tailwind shadow for header shadow-xl */
.shadow-xl {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.dark .shadow-xl {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
/* Hamburger menu JS to toggle content */
@media (max-width: 1023px) {
.lg\:hidden + div {
display: none;
}
.lg\:hidden + div.active {
display: block;
}
}
/* Simple JS for mobile menu and dark mode toggle */
document.addEventListener('DOMContentLoaded', () => {
const menuButton = document.querySelector('.lg\:hidden button');
const navCollapse = document.getElementById('navbar-collapse');
const darkModeToggle = document.querySelector('button[aria-label="Toggle Dark Mode"]');
// Mobile menu toggle
if (menuButton && navCollapse) {
menuButton.addEventListener('click', () => {
navCollapse.classList.toggle('hidden');
if (!navCollapse.classList.contains('hidden')) {
navCollapse.classList.add('active'); // Add active for custom CSS display
} else {
navCollapse.classList.remove('active');
}
});
}
// Dark mode toggle
if (darkModeToggle) {
darkModeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
// Save preference (optional)
if (document.documentElement.classList.contains('dark')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
// Apply saved theme on load (optional)
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
// Close dropdowns when clicking outside (basic, for demonstration)
document.addEventListener('click', (e) => {
document.querySelectorAll('.group.relative').forEach(dropdown => {
if (!dropdown.contains(e.target)) {
dropdown.querySelector('div')?.classList.remove('opacity-100', 'visible', 'scale-y->100');
dropdown.querySelector('div')?.classList.add('opacity-0', 'invisible', 'scale-y-75');
dropdown.querySelector('a svg')?.classList.remove('rotate-180');
}
});
});
// For accessibility/keyboard navigation for dropdowns (complex; basic example)
document.querySelectorAll('.group.relative > a').forEach(link => {
link.addEventListener('focus', () => {
link.parentElement.querySelector('div[role="menu"]')?.classList.add('opacity-100', 'visible', 'scale-y-100');
link.parentElement.querySelector('div[role="menu"]')?.classList.remove('opacity-0', 'invisible', 'scale-y-75');
});
link.addEventListener('blur', (event) => {
if (!link.parentElement.contains(event.relatedTarget)) {
link.parentElement.querySelector('div[role="menu"]')?.classList.remove('opacity-100', 'visible', 'scale-y-100');
link.parentElement.querySelector('div[role="menu"]')?.classList.add('opacity-0', 'invisible', 'scale-y-75');
}
});
});
});
<\/style>Componentes relacionados
Componente de navegación pegajoso brutalista
Barra de navegación pegajosa brutalista en escala de grises para un blog compatible con el modo oscuro
Componente de navegación pegajosa
Una barra de navegación pegajosa y receptiva con efectos de neón/brillo, adecuada para plataformas educativas o de aprendizaje. Cuenta con un esquema de color púrpura/violeta, compatibilidad con el modo oscuro y elementos de menú interactivos.
Componente de navegación pegajosa
Componente de navegación pegajosa y receptivo con modo oscuro