Untitled
unknown
html
17 days ago
1.0 kB
6
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Toggle Menu Example</title> <style> /* Navigation styling */ .nav { display: none; list-style: none; padding: 0; } .nav.active { display: block; } .menu-btn { background-color: #3498db; color: #fff; padding: 10px; border: none; cursor: pointer; } </style> </head> <body> <button class="menu-btn">Toggle Menu</button> <ul class="nav" id="nav"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> <script> const menuBtn = document.querySelector('.menu-btn'); const nav = document.getElementById('nav'); menuBtn.addEventListener('click', function() { // Toggle the 'active' class on the navigation list nav.classList.toggle('active'); }); </script> </body> </html>
Editor is loading...
Leave a Comment