Advertisement
ivana_andreevska

Event Modifier->Menu Toggle->DOM

Dec 23rd, 2021
158
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.     <head>
  3.         <title>Vezbi</title>
  4.         <meta charset="utf-8">
  5.         <link rel="stylesheet" href="style.css">
  6.         <script type="text/javascript" src="main.js" defer></script>
  7.     </head>
  8.  
  9.     <body>
  10.         <a onclick="menuToggle()" class="menu-btn" href="#">Menu</a>
  11.         <div class="menu">
  12.             <ul>
  13.                 <li><a href="#">This is a link 1</a></li>
  14.                 <li><a href="#">This is a link 2</a></li>
  15.                 <li><a href="#">This is a link 3</a></li>
  16.                 <li><a href="#">This is a link 4</a></li>
  17.                 <li><a href="#">This is a link 5</a></li>
  18.             </ul>
  19.         </div>
  20.     </body>
  21. <script>
  22.     let menuBtn=document.querySelector(".menu-btn");
  23. let menu=document.querySelector(".menu");
  24. let menuStatus=false;
  25.  
  26. menu.style.marginLeft="-300px";
  27.  
  28.  
  29. function menuToggle()
  30. {
  31.     if(menuStatus==false)
  32.     {
  33.         menu.style.marginLeft="0px";
  34.         menuStatus=true;
  35.     }
  36.     else if(menuStatus==true)
  37.     {
  38.         menu.style.marginLeft="-300px";
  39.         menuStatus=false;
  40.     }
  41. }
  42.  
  43.  menuBtn.onclick=menuToggle; //without()
  44. </script>
  45. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement