WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Exemplo de código de menu suspenso HTML
25
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
17 September 2024
Identidade
21 December 2024
Um código por cleancloud166
29 December 2024
Um código por wsss
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'); } }); });