Pure JS scrolldown navbar

Question

我想學習JavaScript，但在純JS中找到簡單的樣本並不是一件容易的工作。我在jQuery中編寫了以下代碼，但很想在純JS中創建下拉導航欄。關於如何處理代碼的任何想法？

這是我在HTML和jQuery製作：

<nav> 
     <ul> 
      <a href='#' id='logo'><h2>QuokkaCentral</h2></a> 
      <a href='#' id='hamburger'><li>MENU &#9776;</li></a> 
      <a href='#' id='cross'><li>CLOSE X</li></a> 
      <div id='navbar'> 
       <a href='#' class='menu'><li>Quokka</li></a> 
       <a href='#' class='menu'><li>Rottnest</li></a> 
       <a href='#' class='menu'><li>Find us</li></a> 
       <a href='#' class='menu'><li>Social</li></a> 
      </div> 
     </ul>   
</nav> 


$("#navbar").hide(); 
$("#cross").hide(); 
$("#hamburger").click(function(){ 
    $("#navbar").slideDown(300); 
    $("#hamburger").hide(); 
    $("#cross").show(); 
}); 

$("#cross").click(function(){ 
    $("#navbar").slideUp(300); 
    $("#cross").hide(); 
    $("#hamburger").show(); 
}); 

Answer 1

這就是我結束了。希望能幫助到你。

var navbar = document.getElementById('navbar'); 
 
var cross = document.getElementById('cross'); 
 
var hamburger = document.getElementById('hamburger'); 
 

 
cross.style.display = "none"; 
 
navbar.style.display = "none"; 
 
hamburger.addEventListener('click', function() { 
 
    navbar.className -= " slideUp"; 
 
    navbar.className += " slideDown"; 
 
    navbar.style.display = "block"; 
 
    hamburger.style.display = "none"; 
 
    cross.style.display = "block"; 
 
}); 
 

 
cross.addEventListener('click', function() { 
 
    navbar.className -= " slideDown"; 
 
    navbar.className += " slideUp"; 
 
    setTimeout(function() { 
 
    navbar.style.display = "none"; 
 
    }, 300); 
 
    cross.style.display = "none"; 
 
    hamburger.style.display = "block"; 
 
});

#navbar.slideDown { 
 
    animation-name: slideDown; 
 
    animation-duration: .3s; 
 
} 
 

 
#navbar.slideUp { 
 
    animation-name: slideUp; 
 
    animation-duration: .3s; 
 
} 
 

 
@keyframes slideDown { 
 
    0% { 
 
    display: none; 
 
    overflow: hidden; 
 
    height: 0px; 
 
    } 
 
    100% { 
 
    display: block; 
 
    overflow: hidden; 
 
    height: 72.2113px; 
 
    } 
 
} 
 

 
@keyframes slideUp { 
 
    0% { 
 
    display: block; 
 
    overflow: hidden; 
 
    height: 72.2113px; 
 
    } 
 
    100% { 
 
    display: none; 
 
    overflow: hidden; 
 
    height: 0px; 
 
    } 
 
}

<nav> 
 
    <ul> 
 
    <a href='#' id='logo'> 
 
     <h2>QuokkaCentral</h2> 
 
    </a> 
 
    <a href='#' id='hamburger'> 
 
     <li>MENU &#9776;</li> 
 
    </a> 
 
    <a href='#' id='cross'> 
 
     <li>CLOSE X</li> 
 
    </a> 
 
    <div id='navbar'> 
 
     <a href='#' class='menu'> 
 
     <li>Quokka</li> 
 
     </a> 
 
     <a href='#' class='menu'> 
 
     <li>Rottnest</li> 
 
     </a> 
 
     <a href='#' class='menu'> 
 
     <li>Find us</li> 
 
     </a> 
 
     <a href='#' class='menu'> 
 
     <li>Social</li> 
 
     </a> 
 
    </div> 
 
    </ul> 
 
</nav>