Menú de hamburguesas Glassmorphism
Un componente de menú de hamburguesas simple y receptivo con diseño Glassmorphism, combinación de colores complementaria y compatibilidad con el modo oscuro.
Código HTML
<nav class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-blue-500 dark:bg-gray-800 dark:bg-opacity-20 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="text-white text-lg font-semibold">My Blog</div>
<button class="text-white focus:outline-none lg:hidden">
<svg class="w-6 h-6" 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="M4 6h16M4 12h16m-4 6h4"></path>
</svg>
</button>
<div class="hidden lg:flex space-x-4">
<a href="#" class="text-white hover:text-gray-200">Home</a>
<a href="#" class="text-white hover:text-gray-200">About</a>
<a href="#" class="text-white hover:text-gray-200">Contact</a>
</div>
</div>
</nav>Componentes relacionados
Componente del menú de hamburguesas
Un componente de menú de hamburguesas skeuomórfico para un tablero con una combinación de colores pastel y un diseño minimalista.
Componente del menú de hamburguesas
Un componente de menú de hamburguesa receptivo diseñado para su uso en el tablero, diseñado en 3D con un esquema de color en escala de grises, adecuado para temas claros y oscuros.
Componente del menú de hamburguesas
Un componente de menú de hamburguesas complejo, receptivo y vibrante con microinteracciones para el comercio electrónico, con una navegación deslizable, enlaces de categoría, una barra de búsqueda e íconos de redes sociales. Es compatible con el modo oscuro y utiliza Lorem Picsum para las imágenes.