Adding sliding effect in hamburger icon and made responsive for phone…

… screen (#180) * Css is changes to make navigation bar more responsive * Some changes made in css for .text and made resposive more
Virtual4087 · Oct 25, 2024 · 2f9e4cd · 2f9e4cd
1 parent 029f7ae
commit 2f9e4cd
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 75 deletions.
diff --git a/assets/css/responsiveness.css b/assets/css/responsiveness.css
@@ -22,6 +22,11 @@
         gap: 2rem;
     }
 }
+@media only screen and (max-width: 1024px) {
+    .body .text{
+        padding-top: 885px;
+    }
+}
 
 @media only screen and (min-width: 600px) and (max-width: 650px) {
     .upper_part .links a {
@@ -87,6 +92,7 @@
 }
 
 @media only screen and (min-width: 400px) and (max-width: 500px) {
+
     .upper_part .links a {
         text-decoration: none;
         letter-spacing: 0.5px;
@@ -171,6 +177,7 @@
 }
 
 @media only screen and (min-width: 300px) and (max-width: 399px) {
+
     .upper_part .links a {
         text-decoration: none;
         letter-spacing: 0.5px;

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -52,92 +52,81 @@
 /* Menu Bar */
 
 .menu-container {
-    display: none;
     position: fixed;
     top: 0;
-    left: 0;
+    right: 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;
-}
-
-.menu {
-    -webkit-backdrop-filter: blur(5px);
-    backdrop-filter: blur(5px);
-    background: rgba(30, 23, 20, 0.575);
-    width: 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-container.open {
+    transform: translateX(0);
+    opacity: 1;
+    pointer-events: auto; 
+  }
+
+  .menu {
+    background: rgba(30, 23, 20, 0.8);
+
+    width: 300px;
     height: 100vh;
     text-align: center;
-    position: relative;
-    color: #000;
-    z-index: 3;
+    color: white;
     display: flex;
-    align-items: center;
+    flex-direction: column;
     justify-content: center;
-}
-
-.close-button {
+  }
+  
+  .close-button {
     position: absolute;
-    top: 10px;
-    right: 28px;
-    font-size: 3.2rem;
+    top: 20px;
+    right: 20px;
+    font-size: 3rem;
     cursor: pointer;
-    color: #fff;
-    text-shadow: 2x solid black;
-}
-
-.close-button:hover {
-    color: green;
-    outline: rgb(74, 18, 18);
-}
-
-.menu ul {
+    color: white;
+  }
+
+  .menu ul {
     list-style: none;
     padding: 0;
-}
-
-.menu ul li {
+  }
+  
+  .menu ul li {
     margin: 20px 0;
-    text-align: center;
-}
-
-.menu ul li a {
+  }
+
+  .menu ul li a {
     text-decoration: none;
-    color: #fff;
+    color: white;
     font-size: 24px;
-    display: block;
-}
-
-.menu ul li a:hover {
+  }
+  .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;
+  }
+
+  .menu-button {
     font-size: 2.2rem;
-    padding: 15px 20px 0px;
     position: fixed;
     top: 10px;
     right: 10px;
-    z-index: 12;
-}
-
-.menu-button:hover {
-    color: green;
-}
-
+    z-index: 14;
+    color: #03a254;
+    cursor: pointer;
+  }
+
+
+    .menu-button:hover {
+        color: green;
+    }
 /*  */
 .quickLinkTextWrapper {
     padding-top: 1rem;
@@ -171,10 +160,13 @@ body {
     position: relative;
 }
 
-html {
+
+html, body {
     scroll-behavior: smooth;
+    overflow-x: hidden;
+    margin: 0;
+    padding: 0;
 }
-
 .section {
     margin-bottom: 5rem;
 }
@@ -185,6 +177,12 @@ html {
     grid-template-rows: 10% 1fr;
     margin-bottom: 0;
 }
+@media only screen and (max-width: 1024px) {
+    .banner::before {
+
+        width: 100%;
+    }
+}
 
 .banner::before {
     content: "";
@@ -287,7 +285,7 @@ nav .nav_buttons {
 }
 
 .body .text {
-    padding-top: 900px;
+    padding-top: 700px;
     color: white;
     font-size: 18px;
 

diff --git a/index.html b/index.html
@@ -87,8 +87,8 @@
                                 >
                             </li>
                             <li>
-                                <a href="./about.html" class="nav_button"
-                                    >ABOUT US</a
+                                <a href="./about.html" onclick="handleClose()" class="nav_button"
+                                    >ABOUT US</a 
                                 >
                             </li>
                             <li>

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();