Componente del menú de hamburguesas
Un componente de menú de hamburguesas receptivo de diseño minimalista / plano adecuado para sitios web comerciales / corporativos, que utiliza un esquema de color pastel y admite el modo oscuro.
Código HTML
<nav class="bg-white dark:bg-gray-800 p-4 rounded shadow">
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-gray-800 dark:text-white">
Logo
</div>
<button id="menu-toggle" class="text-gray-800 dark:text-white focus:outline-none">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
</svg>
</button>
</div>
<div id="menu" class="hidden mt-4">
<ul class="flex flex-col space-y-2">
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a></li>
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
</ul>
</div>
</nav>
<style>
@media (min-width: 768px) {
#menu {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 0;
}
#menu-toggle {
display: none;
}
}
</style>Componentes relacionados
Componente del menú de hamburguesas
Un componente de menú de hamburguesa receptivo diseñado con estilo brutalismo usando Tailwind CSS, con soporte para modo oscuro y marcadores de posición para imágenes y avatares.
Componente de menú de hamburguesas 3D
Un componente de menú de hamburguesas receptivo con una estética 3D, un esquema de color neutro cálido y soporte para modo oscuro, adecuado para plataformas de entretenimiento y medios. Cuenta con un sutil efecto de desplazamiento en 3D.
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.