WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML-Dropdown-Menü-Codebeispiel
328
ledoc
Im Editor öffnen
Veröffentlichen Sie Ihren Code
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dropdown Menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <style> </style> </head> <body> <ul> <li style="position: relative;"> <a href="#" class="dropdown-toggler" data-dropdown="my-dropdown-id"> Categories <i class="fa fa-angle-down"></i> </a> <ul class="dropdown" id="my-dropdown-id"> <li><a href="#">Category 1</a></li> <li class="separator"></li> <li><a href="#">Category 2</a></li> <li class="separator"></li> <li><a href="#">Category 3</a></li> </ul> </li> </ul> <script> </script> </body> </html>
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'); } }); });
