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.
Código HTML
<div class="relative">
<input type="checkbox" id="menu-toggle" class="hidden peer" />
<label for="menu-toggle" class="block cursor-pointer p-4 md:hidden focus:outline-none">
<div class="w-6 h-1 bg-fuchsia-500 mb-1 transition-all duration-300 peer-checked:rotate-45 peer-checked:translate-y-2"></div>
<div class="w-6 h-1 bg-fuchsia-500 mb-1 transition-all duration-300 peer-checked:opacity-0"></div>
<div class="w-6 h-1 bg-fuchsia-500 transition-all duration-300 peer-checked:-rotate-45 peer-checked:-translate-y-2"></div>
</label>
<div class="fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-fuchsia-600 to-purple-700 text-white p-5 shadow-lg overflow-auto z-50 transform -translate-x-full peer-checked:translate-x-0 transition-transform duration-300 ease-in-out dark:from-gray-800 dark:to-gray-900 dark:text-gray-100 md:relative md:w-auto md:h-auto md:bg-none md:shadow-none md:translate-x-0 md:flex md:flex-col md:overflow-visible">
<div class="mb-8 md:hidden">
<img src="https://www.picsum.photos/100/100" alt="Store Logo" class="rounded-full mx-auto mb-3" />
<p class="text-center text-lg font-bold">E-Shop</p>
</div>
<nav class="md:flex md:flex-col md:space-y-2">
<a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Home</a>
<a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Shop All</a>
<div class="relative group">
<a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Categories</a>
<div class="ml-5 text-sm absolute left-full top-0 w-48 bg-fuchsia-800 p-3 rounded-lg shadow-xl opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all duration-300 invisible group-hover:visible dark:bg-gray-700">
<a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Electronics</a>
<a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Apparel</a>
<a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Home Goods</a>
</div>
</div>
<a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Deals</a>
<a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Contact</a>
</nav>
<div class="mt-8 md:mt-4">
<input type="text" placeholder="Search..." class="w-full p-2 rounded-lg bg-fuchsia-700 bg-opacity-70 text-white placeholder-fuchsia-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-300 dark:bg-gray-700 dark:placeholder-gray-400" />
</div>
<div class="mt-8 pt-8 border-t border-fuchsia-500 border-opacity-50 text-center md:mt-4 md:pt-4 md:border-none">
<p class="text-sm mb-4">Follow Us</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>Componentes relacionados
Menú de hamburguesas brutalistas
Menú de hamburguesas de estilo brutalista con colores vibrantes y soporte para modo oscuro, diseñado para un blog o sitio de contenido.
Componente del menú de hamburguesas
Un componente receptivo del menú de hamburguesas diseñado en estilo brutalismo con una combinación de colores pastel. Adecuado para un portafolio que exhibe trabajos o productos.
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.