From 2f9e4cd2b5ad6ace6aff3150474fcb964a5ca34c Mon Sep 17 00:00:00 2001
From: Dhruv Kapoor <122423985+DHRUVKAPOOR07@users.noreply.github.com>
Date: Fri, 25 Oct 2024 12:57:40 +0530
Subject: [PATCH] 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
---
assets/css/responsiveness.css | 7 ++
assets/css/style.css | 136 +++++++++++++++++-----------------
index.html | 4 +-
scripts/index.js | 18 ++++-
4 files changed, 90 insertions(+), 75 deletions(-)
diff --git a/assets/css/responsiveness.css b/assets/css/responsiveness.css
index f49c4d8..972d641 100644
--- 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
index d206ccb..0d42336 100644
--- 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
index 4a65f23..f19a0e6 100644
--- a/index.html
+++ b/index.html
@@ -87,8 +87,8 @@
>
- ABOUT USABOUT US
diff --git a/scripts/index.js b/scripts/index.js
index 0797257..c175a8c 100644
--- 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();