Css is changes to make navigation bar more responsive

Virtual4087 · Oct 24, 2024 · 7d874d9 · 7d874d9
1 parent 029f7ae
commit 7d874d9
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 75 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -15,21 +15,21 @@
     z-index: 1;
     width: 100%;
     background-color: #f1f1f1;
-  }
-
-  /* The progress container (grey background) */
-  .progress-container {
+}
+
+.progress-container {
     width: 100%;
     height: 8px;
     background: #ccc;
-  }
-  
-  .progress-bar {
+}
+
+.progress-bar {
     height: 8px;
     background: #04AA6D;
     width: 0%;
-  }
-/*scroll to top button*/
+}
+
+/* Scroll to top button */
 #scrollToTopBtn {
     display: none;
     position: fixed;
@@ -49,95 +49,87 @@
 #scrollToTopBtn:hover {
     background-color: #333;
 }
-/* Menu Bar */
 
+/* Menu Bar and Container */
+/* Menu Container */
 .menu-container {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    -webkit-backdrop-filter: blur(5px);
-    backdrop-filter: blur(5px);
-    z-index: 13;
-    align-items: center;
-    justify-content: center;
-    display: none;
+position: fixed;
+top: 0;
+right: 0;
+width: 100%;
+height: 100%;
+background: rgba(0, 0, 0, 0.5); 
+z-index: 1000;
+display: flex;
+justify-content: flex-end; 
+transform: translateX(100%); 
+transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
+opacity: 0; 
+pointer-events: none; 
 }
 
-.menu {
-    -webkit-backdrop-filter: blur(5px);
-    backdrop-filter: blur(5px);
-    background: rgba(30, 23, 20, 0.575);
-    width: 100%;
-    height: 100vh;
-    text-align: center;
-    position: relative;
-    color: #000;
-    z-index: 3;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+
+.menu-container.open {
+transform: translateX(0);
+opacity: 1;
+pointer-events: auto; 
 }
 
-.close-button {
-    position: absolute;
-    top: 10px;
-    right: 28px;
-    font-size: 3.2rem;
-    cursor: pointer;
-    color: #fff;
-    text-shadow: 2x solid black;
+.menu {
+background: rgba(30, 23, 20, 0.8);
+
+width: 300px;
+height: 100vh;
+text-align: center;
+color: white;
+display: flex;
+flex-direction: column;
+justify-content: center;
 }
 
-.close-button:hover {
-    color: green;
-    outline: rgb(74, 18, 18);
+.close-button {
+position: absolute;
+top: 20px;
+right: 20px;
+font-size: 3rem;
+cursor: pointer;
+color: white;
 }
 
 .menu ul {
-    list-style: none;
-    padding: 0;
+list-style: none;
+padding: 0;
 }
 
 .menu ul li {
-    margin: 20px 0;
-    text-align: center;
+margin: 20px 0;
 }
 
 .menu ul li a {
-    text-decoration: none;
-    color: #fff;
-    font-size: 24px;
-    display: block;
+text-decoration: none;
+color: white;
+font-size: 24px;
 }
-
-.menu ul li a:hover {
-    color: green;
+.menu ul li a:hover{
+color: green;
 }
 
 .menu-button {
-    cursor: pointer;
-    background: transparent;
-    color: #03a254;
-    /* text-align:; */
-    display: block;
-    justify-content: end;
-    align-items: end;
-    font-size: 2.2rem;
-    padding: 15px 20px 0px;
-    position: fixed;
-    top: 10px;
-    right: 10px;
-    z-index: 12;
+font-size: 2.2rem;
+position: fixed;
+top: 10px;
+right: 10px;
+z-index: 14;
+color: #03a254;
+cursor: pointer;
 }
 
+
 .menu-button:hover {
     color: green;
 }
 
+
 /*  */
 .quickLinkTextWrapper {
     padding-top: 1rem;

diff --git a/scripts/index.js b/scripts/index.js
@@ -3,6 +3,9 @@ const showPopupButtons = document.querySelectorAll(".showPopupButton");
 const closePopupButton = document.querySelector(".closePopupButton");
 const popup = document.querySelector(".popup");
 const overlay = document.getElementById("overlay");
+const openMenuButton = document.getElementById('openMenu');
+const closeMenuButton = document.getElementById('closeMenu');
+const menuContainer = document.getElementById('menuContainer');
 // showPopupButton.addEventListener("click", function() {
 //   popup.style.display = "block";
 //   overlay.style.display = "block";
@@ -27,24 +30,31 @@ closePopupButton.addEventListener("click", function () {
   overlay.style.display = "none";
 });
 
+// Handle opening the menu with the hamburger icon
 document.getElementById("openMenu").addEventListener("click", function () {
-  document.getElementById("menuContainer").style.display = "flex";
+  console.log("Menu toggle clicked");
+  document.getElementById("menuContainer").classList.add("open"); // Add 'open' class to slide the menu in
 });
 
+// Handle closing the menu with the close button
 document.getElementById("closeMenu").addEventListener("click", function () {
-  document.getElementById("menuContainer").style.display = "none";
+  document.getElementById("menuContainer").classList.remove("open"); // Remove 'open' class to slide the menu out
 });
 
+// Optional: Handle closing the menu when clicking on any element with the .close class
 document.querySelectorAll(".close").forEach((element) => {
   element.addEventListener("click", function () {
-    document.getElementById("menuContainer").style.display = "none";
+    document.getElementById("menuContainer").classList.remove("open");
   });
 });
 
+
+// Function to close the menu (called on anchor tag click)
 function handleClose() {
-  document.getElementById("menuContainer").style.display = "none";
+  document.getElementById("menuContainer").classList.remove("open");
 }
 
+
 let mybutton = document.getElementById("scrollToTopBtn");
 window.onscroll = function () {
   scrollFunction();