WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Trecho de código do menu suspenso HTML
683
irismomo62
Abrir no Editor
Publique Seu Código
Recomendado
16 February 2025
Um código por NotYoEA
13 November 2024
Efeito de moldura em imagens usando CSS puro
28 May 2025
Abertura de rolagem
HTML
Copy
Dropdown Menu
Categories
Category 1
Category 2
Category 3
CSS
Copy
ul { list-style: none; padding: 0; } .dropdown { display: none; background-color: #f9f9f9; padding: 10px; border: 1px solid #ccc; position: absolute; margin-top: 5px; } .dropdown li { padding: 5px 0; } .separator { height: 1px; background: #ccc; margin: 5px 0; } .show { display: block; }
JS
Copy
document.querySelectorAll('.dropdown-toggler').forEach(toggler => { toggler.addEventListener('click', function (e) { e.preventDefault(); const dropdownId = this.getAttribute('data-dropdown'); const dropdown = document.getElementById(dropdownId); dropdown.classList.toggle('show'); }); }); // Fermer les menus si on clique ailleurs window.addEventListener('click', function (e) { document.querySelectorAll('.dropdown').forEach(dropdown => { if (!dropdown.parentElement.contains(e.target)) { dropdown.classList.remove('show'); } }); });