Untitled
unknown
plain_text
20 days ago
1.7 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Burger Menu</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .menu-icon { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 25px; cursor: pointer; } .menu-icon div { width: 100%; height: 4px; background-color: black; border-radius: 5px; } .menu { display: none; position: absolute; top: 50px; left: 10px; background: black; color: white; padding: 10px; border-radius: 5px; } .menu a { display: block; color: white; text-decoration: none; padding: 5px 0; } </style> </head> <body> <div class="menu-icon" onclick="toggleMenu()"> <div></div> <div></div> <div></div> </div> <div class="menu" id="menu"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> </div> <script> function toggleMenu() { var menu = document.getElementById("menu"); if (menu.style.display === "block") { menu.style.display = "none"; } else { menu.style.display = "block"; } } </script> </body> </html>
Editor is loading...
Leave a Comment