Menu Animation Update

Author: JoyM268

about.html

@@ -32,7 +32,7 @@
             </a>
         </div>
     </header>
-    <div class="menu-list" id="menu-drop">
+    <div class="menu-list hide" id="menu-drop">
         <a href="index.html">Home</a>
         <a href="contact.html">Contact</a>
         <a href="form.html">Submit Project</a>

contact.html

@@ -33,7 +33,7 @@
             </a>
         </div>
     </header>
-    <div class="menu-list" id="menu-drop">
+    <div class="menu-list hide" id="menu-drop">
         <a href="index.html">Home</a>
         <a href="contact.html" id="active-menu">Contact</a>
         <a href="form.html">Submit Project</a>

feedbackfailed.html

@@ -31,7 +31,7 @@
             </a>
         </div>
     </header>
-    <div class="menu-list" id="menu-drop">
+    <div class="menu-list hide" id="menu-drop">
         <a href="index.html" id="active-menu">Home</a>
         <a href="contact.html">Contact</a>
         <a href="form.html">Submit Project</a>

feedbacksubmitted.html

@@ -31,7 +31,7 @@
             </a>
         </div>
     </header>
-    <div class="menu-list" id="menu-drop">
+    <div class="menu-list hide" id="menu-drop">
         <a href="index.html" id="active-menu">Home</a>
         <a href="contact.html">Contact</a>
         <a href="form.html">Submit Project</a>

form.html

@@ -33,7 +33,7 @@
             </a>
         </div>
     </header>
-    <div class="menu-list" id="menu-drop">
+    <div class="menu-list hide" id="menu-drop">
         <a href="index.html">Home</a>
         <a href="contact.html">Contact</a>
         <a href="form.html" id="active-menu">Submit Project</a>

formfailed.html

@@ -31,7 +31,7 @@
             </a>
         </div>
     </header>
-    <div class="menu-list" id="menu-drop">
+    <div class="menu-list hide" id="menu-drop">
         <a href="index.html" id="active-menu">Home</a>
         <a href="contact.html">Contact</a>
         <a href="form.html">Submit Project</a>

formsubmitted.html

@@ -31,7 +31,7 @@
             </a>
         </div>
     </header>
-    <div class="menu-list" id="menu-drop">
+    <div class="menu-list hide" id="menu-drop">
         <a href="index.html" id="active-menu">Home</a>
         <a href="contact.html">Contact</a>
         <a href="form.html">Submit Project</a>

index.html

@@ -30,10 +30,10 @@
             </a>
             <a class="menu" id="close-click" onclick="closeSlideMenu()">
                 <img class="close-icon" src="assets/Header/close-icon.png">
-            </a>
+            </a>    
         </div>
     </header>
-    <div class="menu-list" id="menu-drop">
+    <div class="menu-list hide" id="menu-drop">
         <a href="index.html" id="active-menu">Home</a>
         <a href="contact.html">Contact</a>
         <a href="form.html">Submit Project</a>

list.html

@@ -33,7 +33,7 @@
             </a>
         </div>
     </header>
-    <div class="menu-list" id="menu-drop">
+    <div class="menu-list hide" id="menu-drop">
         <a href="index.html">Home</a>
         <a href="contact.html">Contact</a>
         <a href="form.html">Submit Project</a>

script/header.js

@@ -8,11 +8,12 @@ function handleMenuDisplay() {
 
 handleMenuDisplay();
 window.addEventListener('resize', function() {
-    if(document.getElementById('menu-drop').style.display != "flex"){
+    if(document.getElementById('menu-drop').classList.contains("hide")){
         handleMenuDisplay();
-    }else if(document.getElementById('menu-drop').style.display == "flex" && window.innerWidth > 480){
+    }else if(document.getElementById('menu-drop').classList.contains("show") && window.innerWidth > 480){
         document.getElementById('close-click').style.display = "none";
-        document.getElementById('menu-drop').style.display = "none";
+        document.getElementById('menu-drop').classList.add("hide");
+        document.getElementById('menu-drop').classList.remove("show");
     }
 });
 
@@ -25,14 +26,16 @@ function enableScroll(){
 }
 
 function openSlideMenu(){
-    document.getElementById('menu-drop').style.display = "flex";
+    document.getElementById('menu-drop').classList.add("show");
+    document.getElementById('menu-drop').classList.remove("hide");
     document.getElementById('menu-click').style.display = "none";
     document.getElementById('close-click').style.display = "flex";
     disableScroll();
 }
 
 function closeSlideMenu(){
-    document.getElementById('menu-drop').style.display = "none";
+    document.getElementById('menu-drop').classList.add("hide");
+    document.getElementById('menu-drop').classList.remove("show");
     document.getElementById('menu-click').style.display = "flex";
     document.getElementById('close-click').style.display = "none";
     enableScroll();