Animation of the navbar

src/css/navbar.css

@@ -26,12 +26,20 @@ nav {
   padding: 10px;
   margin-top: 20px;
   margin-left: 10px;
+  transition: 0.3s ease-out;
 }
 
 .menu li {
   margin: 10px 0;
   list-style: none;
   background-color: #48435c;
+  opacity: 0;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.menu li.animate {
+  opacity: 1;
+  transform: translateY(0);
 }
 
 .menu li a {
@@ -47,5 +55,4 @@ nav {
 #logoNav{
   max-width: 25%;
   height: auto;
-}
-
+}

src/js/navbarAndFooter.js

@@ -5,6 +5,7 @@ const menu = document.querySelector('.menu');
 burger.onclick = function() {
     //Afficher ou cache le menu
     menu.classList.toggle('show-menu');
+    showMenuItems();
 };
 
 
@@ -60,6 +61,15 @@ menuItems.forEach((menuItem) => {
     });
 });
 
+//Fonction pour l'annimation du menu
+function showMenuItems() {
+    menuItems.forEach((item, index) => {
+        setTimeout(() => {
+            item.classList.add('animate');
+        }, index * 100); // Délai progressif de 100 ms entre chaque élément
+    });
+}
+
 //Lance les fonctions updateTime et startTimer
 updateTime();
 startTimer();