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
Componente del menú de hamburguesas
Un componente de menú de hamburguesas receptivo diseñado con un estilo 3D, adecuado para fines de tablero. Incorpora un esquema de color triádico y tiene una interfaz compleja con elementos interactivos, que admite temas claros y oscuros.
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.
Menú de hamburguesas Componente 19
Un componente esquelético del menú de hamburguesas diseñado en estilo skeuomórfico, que imita elementos del mundo real. Es responsivo e incluye soporte para el modo oscuro usando Tailwind CSS.