Brutalist_Triadic_Simple_Mega_Menu
Un mega menú simple de estilo brutalista diseñado para un blog o sitio de contenido, con un esquema de color triádico y una capacidad de respuesta completa con soporte para modo oscuro.
Código HTML
<nav class="bg-violet-500 dark:bg-violet-900 text-yellow-300 dark:text-cyan-300 border-b-8 border-yellow-300 dark:border-cyan-300 relative z-50">
<div class="container mx-auto px-4 py-4 flex flex-col md:flex-row items-center justify-between">
<div class="flex justify-between items-center w-full md:w-auto">
<a href="#" class="text-4xl md:text-5xl font-extrabold tracking-tighter uppercase leading-none border-4 border-yellow-300 dark:border-cyan-300 px-3 py-1 bg-yellow-300 bg-opacity-20 dark:bg-cyan-300 dark:bg-opacity-20 text-yellow-300 dark:text-cyan-300">
BLOG CO.
</a>
<button id="menu-toggle" class="md:hidden focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2">
<svg class="w-8 h-8 text-yellow-300 dark:text-cyan-300" 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="3" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<div id="mega-menu-content" class="hidden md:flex flex-col md:flex-row md:items-center w-full md:w-auto mt-4 md:mt-0 space-y-4 md:space-y-0 md:space-x-8 lg:space-x-12 absolute md:static top-full left-0 right-0 bg-violet-600 dark:bg-violet-800 border-t-8 border-yellow-300 dark:border-cyan-300 md:border-none p-4 md:p-0">
<a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
Articles
</a>
<a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
Categories
</a>
<a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
About
</a>
<a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
Contact
</a>
</div>
</div>
</nav>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.getElementById('menu-toggle');
const megaMenuContent = document.getElementById('mega-menu-content');
menuToggle.addEventListener('click', function() {
megaMenuContent.classList.toggle('hidden');
megaMenuContent.classList.toggle('flex');
});
});
</script>Componentes relacionados
Componente Mega Menú
Un Mega Componente de Menú responsivo diseñado con estilo Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, que admite temas oscuros usando Tailwind CSS.
Componente Mega Menú
Un componente de Mega Menú responsivo diseñado para blogs/consumo de contenido, con microinteracciones y un enfoque en los colores del tono tierra, con soporte para el modo oscuro usando Tailwind CSS.
Componente Mega Menú
Un componente de mega menú complejo y receptivo diseñado con una estética monoespaciada / desarrollador y un esquema de color neutro cálido, adecuado para sitios web profesionales de consultoría / servicios. Incluye soporte para modo oscuro.