added opening animation

burger.js

@@ -3,21 +3,37 @@
 
 function toggleMenu() {
     const menu = document.querySelector(".menu");
+    
+    // Toggle the 'active' class to show/hide the menu
     menu.classList.toggle("active");
     
-    // Add event listener to close menu when clicking anywhere on the document
+    // Apply animations based on the menu's visibility
     if (menu.classList.contains("active")) {
+        menu.style.animation = "slideIn 0.3s forwards";
         document.addEventListener("click", closeMenu);
     } else {
+        menu.style.animation = "slideOut 0.3s forwards";
+        // Remove the event listener to close the menu
         document.removeEventListener("click", closeMenu);
+        // Reset animation after it's completed
+        menu.addEventListener("animationend", () => {
+            menu.style.animation = "";
+        }, { once: true });
     }
 }
 
 function closeMenu(event) {
     const menu = document.querySelector(".menu");
+    // Check if the click is outside the menu and not on the burger icon
     if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) {
-        menu.classList.remove("active");
+        menu.style.animation = "slideOut 0.3s forwards";
+        // Remove the event listener to close the menu
         document.removeEventListener("click", closeMenu);
+        // Reset animation after it's completed
+        menu.addEventListener("animationend", () => {
+            menu.classList.remove("active");
+            menu.style.animation = "";
+        }, { once: true });
     }
 }
 

header.js

@@ -13,14 +13,14 @@ class Header extends HTMLElement {
         <div class="header-content">
            <div class="project-name"><a href="index.html">FOSS alternatives</a></div>
             <button class="burger-menu" onclick="toggleMenu()">☰</button>
-            <ul class="menu">
+              <ul class="menu">
-                <li><a href="games/index.html">Games</a></li>
+                  <li><a href="games/index.html">Games</a></li>
-                <li><a href="general_purpose/index.html">General Purpose</a></li>
+                  <li><a href="general_purpose/index.html">General Purpose</a></li>
-                <li><a href="internet_tools/index.html">Internet Tools</a></li>
+                  <li><a href="internet_tools/index.html">Internet Tools</a></li>
-                <li><a href="multimedia/index.html">Multimedia</a></li>
+                  <li><a href="multimedia/index.html">Multimedia</a></li>
-                <li><a href="operating_systems/index.html">Operating Systems</a></li>
+                  <li><a href="operating_systems/index.html">Operating Systems</a></li>
-                <li><a href="social_platforms/index.html">Social Platforms</a></li>
+                  <li><a href="social_platforms/index.html">Social Platforms</a></li>
-            </ul>
+              </ul>
         </div>
     </header>
     `;

styles.css

@@ -4,7 +4,7 @@
   margin: 0;
   padding: 0;
   font-family: "Roboto", Arial, sans-serif;
-  transition: all 2s ease; /* Smooth transitions */
+  transition: 3s; /* Smooth transitions */
 }
 
 /* Body styles */
@@ -21,13 +21,14 @@ body {
 /* Header styles */
 header {
   background-color: #2c3e50;
-  padding: 15px 0; /* Adjusted padding */
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  padding: 0; /* Further reduce the padding */
+  height: auto;
+  z-index: 9999;
 }
 
 .header-content {
@@ -36,13 +37,29 @@ header {
   align-items: center;
   max-width: 1200px;
   margin: 0 auto;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
   padding: 0 20px; /* Original padding */
+  z-index: -1;
+}
+
+header li {
+  margin: 0;
+  padding: 10px;
+}
+
+header a {
+  width: 100%;
+  padding: 12px 0;
+  text-align: center; /* Center align the menu items */
 }
 
 .project-name {
   color: #ffffff;
   font-size: 1.5em; /* Updated font size */
   font-weight: bold;
+  z-index: 9999;
 }
 
 .burger-menu {
@@ -51,16 +68,52 @@ header {
   color: #ffffff;
   font-size: 1.5em; /* Updated font size */
   cursor: pointer;
-  display: none;
+  display: block;
+  padding: 0;
+  z-index: 9999;
 }
 
 .menu {
+  display: none;
+  flex-direction: column;
+  background-color: #2c3e50;
+  position: absolute;
+  top: 100%; 
+  left: 0;
+  width: 100%; /* Full width of the header */
+  z-index: 999;
+  padding: 0;
   list-style: none;
+  justify-content: center; /* Center items vertically */
+  text-align: center; /* Center items horizontally */
+  animation: slideOut 0.3s ease forwards; /* Initial animation state */
+}
+
+.menu.active {
   display: flex;
-  justify-content: space-around;
+  animation: slideIn 0.3s ease forwards; /* Show animation */
-  align-items: center;
+}
-  flex-grow: 1;
+
-  margin: 0;
+.menu.closed {
+  animation: slideOut 0.3s ease forwards; /* Hide animation */
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
 }
 
 header li {
@@ -73,6 +126,7 @@ header a {
   padding: 8px; /* Smaller padding */
   border-radius: 5px;
   transition: background-color 0.3s ease;
+  justify-content: center;
 }
 
 header a:hover {
@@ -81,7 +135,6 @@ header a:hover {
 
 /* Article styles */
 article {
-  margin-top: 8em;
   margin-bottom: 50px;
   padding: 20px;
   width: 90%;
@@ -90,6 +143,8 @@ article {
   border-radius: 10px;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   text-align: left;
+  margin-top: 140px; /* Increase margin-top for better readability */
+  padding-top: 20px;
 }
 
 h1 {
@@ -138,12 +193,14 @@ nav {
 }
 
 .folder-list {
+  justify-content: center;
   list-style-type: none;
   padding: 0;
 }
 
 .folder-list-item {
   margin-bottom: 10px;
+  justify-content: center;
 }
 
 .folder-link {
@@ -165,60 +222,21 @@ nav {
   transform: scale(0.98); /* Slight scale down on click */
 }
 
-/* Mobile Styles */
+/* Animation styles */
-@media (max-width: 4000px) {
+@keyframes slideIn {
-  .burger-menu {
+  from {
-    display: block;
+    transform: translateY(-100%);
-    padding: 0;
   }
-
+  to {
-  .menu {
+    transform: translateY(0);
-    display: none;
+  }
-    flex-direction: column;
+}
-    background-color: #2c3e50;
+
-    position: absolute;
+@keyframes slideOut {
-    top: 100%; 
+  from {
-    left: 0;
+    transform: translateY(0);
-    width: 100%;
+  }
-    z-index: 999;
+  to {
-    padding: 0;
+    transform: translateY(-100%);
-  }
-
-  .menu.active {
-    display: flex;
-    padding: 10px;
-  }
-  
-  header {
-    padding: 0; /* Further reduce the padding */
-    height: auto;
-  }
-
-  .header-content {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 20px; /* Original padding */
-  }
-
-  .project-name {
-    font-size: 1.5em; /* Updated font size */
-  }
-
-  header li {
-    margin: 0;
-    padding: 10px;
-  }
-
-  header a {
-    width: 100%;
-    padding: 12px 0;
-    text-align: center; /* Center align the menu items */
-  }
-
-  article {
-    margin-top: 140px; /* Increase margin-top for better readability */
-    padding-top: 20px;
-    margin-bottom: 20px; /* Adjust margin-bottom for consistency */
   }
 }