RetroGamingMenú desplegable
Un componente de menú desplegable receptivo, de temática retro/vintage con un esquema de color apagado, adecuado para sitios web de juegos, con soporte para modo oscuro.
Código HTML
<div class="relative inline-block text-left font-mono">
<button id="retroDropdownButton" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-400 bg-gray-200 px-4 py-2 text-sm font-bold text-gray-800 shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 dark:focus:ring-purple-400 transform transition-all duration-150 ease-in-out active:translate-y-1" aria-expanded="false" aria-haspopup="true">
Game Actions
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="retroDropdownMenu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-gray-200 ring-1 ring-black ring-opacity-5 focus:outline-none border-t-2 border-l-2 border-r-4 border-b-4 border-gray-500 dark:bg-gray-800 dark:border-gray-600 hidden opacity-0 scale-95 transition-all duration-200 ease-out transform" role="menu" aria-orientation="vertical" aria-labelledby="retroDropdownButton" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-0">
<span class="pr-2 text-yellow-600 dark:text-yellow-400">▶</span> New Game
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-1">
<span class="pr-2 text-red-600 dark:text-red-400">■</span> Load Game
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-2">
<span class="pr-2 text-green-600 dark:text-green-400">●</span> Save Game
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-3">
<span class="pr-2 text-blue-600 dark:text-blue-400">◆</span> Options
</a>
</div>
</div>
</div>
<script>
// Basic JavaScript for demonstration, not part of the HTML/Tailwind solution itself.
// In a real application, you'd use a JS framework or a dedicated script.
const dropdownButton = document.getElementById('retroDropdownButton');
const dropdownMenu = document.getElementById('retroDropdownMenu');
dropdownButton.addEventListener('click', () => {
const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
dropdownButton.setAttribute('aria-expanded', !isExpanded);
if (!isExpanded) {
dropdownMenu.classList.remove('hidden', 'opacity-0', 'scale-95');
dropdownMenu.classList.add('block', 'opacity-100', 'scale-100');
dropdownMenu.focus();
} else {
dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
}
});
// Close the dropdown if clicking outside
document.addEventListener('click', (event) => {
if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
if (!dropdownMenu.classList.contains('hidden')) {
dropdownButton.setAttribute('aria-expanded', 'false');
dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
}
}
});
// Close on Escape key
dropdownMenu.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
dropdownButton.setAttribute('aria-expanded', 'false');
dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
dropdownButton.focus();
}
});
</script>
Componentes relacionados
Componente de menú desplegable
Un componente de menú desplegable receptivo diseñado para uso comercial/corporativo, con microinteracciones y colores complementarios. Es compatible con temas claros y oscuros y utiliza Tailwind CSS para el estilo.
Componente de menú desplegable
Componente de menú desplegable receptivo con soporte para modo oscuro
Componente de menú desplegable
Un componente de menú desplegable responsivo diseñado con microinteracciones, un esquema de color análogo y soporte para temas oscuros, adecuado para un sitio web de portafolio.