Skip to content

Commit

Permalink
Made side menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@VijaySamant4368
VijaySamant4368 committed Aug 9, 2024
1 parent 8df3b3b commit 645759f
Show file tree
Hide file tree
Showing 3 changed files with 272 additions and 5 deletions.
165 changes: 165 additions & 0 deletions Css-files/navbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,3 +153,168 @@
background-color: var(--primary-bg-color);
color: var(--primary-text-color);
}

.mobile-menu {
top: 0;
right: 0;
width: 70vw;
height: 100vh;
position: fixed;
z-index: 2;
background: rgba(0,0,0,0.9);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
transform: translateX(100%);
transition: transform 0.3s;
}

/* Screen more than 991px wide */
@media ((min-width: 991px)) {
.mobile-menu {
display: none !important;
}

}

.mobile-menu a {
/* box-shadow: inset 0 0 1rem rgba(255,255,255,0.7); */
/* border-top: 3px solid #fff; */
/* border-bottom: 1px solid #fff; */
width: 100%;
text-align: center;
margin: 1rem 0;
padding: 1rem;
color: #fff;
text-decoration: none;
text-transform: uppercase;
position: relative;
}

.mobile-menu a:hover {
color: #f39d2c;
}

.mobile-menu__trigger {
cursor: pointer;
content: "";
position: absolute;
z-index: 3;
width: 3rem;
height: 3rem;
border-radius: 50%;
top: 2rem;
left: -5rem;
background: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
/* -webkit-transform: rotateX(90deg);
transform: rotateX(180deg); */
}
.mobile-menu__trigger span {
display: block;
width: 50%;
height: 2px;
background: #fff;
position: relative;
}
.mobile-menu__trigger span::before,
.mobile-menu__trigger span::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
/* left: 0; */
background: #fff;
transition: all 0.3s;
}
.mobile-menu__trigger span::before {
top: -7px;
}
.mobile-menu__trigger span::after {
top: 7px;
}
.mobile-menu__trigger:hover span::before {
width: 50%;
top: -3px;
left: 0;
transform: rotate(-30deg);
}
.mobile-menu__trigger:hover span::after {
width: 50%;
top: 3px;
left: 0;
transform: rotate(30deg);
}
.mobile-menu_open {
transform: translateX(0%);
box-shadow: 0 0 2rem #000;
}
.mobile-menu_open+.overlay {
visibility: visible;
opacity: 1;
}
.mobile-menu_open .mobile-menu__trigger span::before,
.mobile-menu_open .mobile-menu__trigger span::after {
right: 0;
}
/* .mobile-menu_open .mobile-menu__trigger:hover span::before {
transform: rotate(30deg);
right: 0;
}
.mobile-menu_open .mobile-menu__trigger:hover span::after {
transform: rotate(-30deg);
} */

.mobile-menu_open .mobile-menu__trigger:hover span::before {
width: 50%;
top: -3px;
right: 0;
transform: rotate(30deg);
left: auto;
}
.mobile-menu_open .mobile-menu__trigger:hover span::after {
width: 50%;
top: 3px;
right: 0;
transform: rotate(-30deg);
left: auto;
}

@media screen and (min-width: 990px) {
.navbarr .nav-links {
display: flex !important;
}
}

@media screen and (max-width: 990px) {
.hamburger {
display: inline;
z-index: 400;
}

.logo a {
font-size: 30px;
}

.nav-links {
position: absolute;
right: 1rem;
top: 3rem;
background-color: #333;
flex-direction: column;
padding: 10px;
align-items: center;
}

.navbarr .nav-links {
display: none;
}

.navbar-toggler {
display: inline !important;
}

}
69 changes: 69 additions & 0 deletions Html-files/navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,72 @@ dropdownli.addEventListener("mouseleave", () => {
navlinka.setAttribute('aria-expanded', 'false');
menu.removeAttribute("data-bs-popper");
});

const mobile_menu = document.querySelector(".mobile-menu"),
mobile_trigger = document.querySelector(".mobile-menu__trigger");

let initialPoint,
finalPoint;

document.addEventListener("touchstart", function(event) {
initialPoint = event.changedTouches[0];
});

document.addEventListener("touchend", function(event) {
finalPoint = event.changedTouches[0];

let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX),
yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);

if(xAbs > 120 || yAbs > 120) { // 120 - SWIPE WIDTH
if(xAbs > yAbs) {
if(finalPoint.pageX < initialPoint.pageX) {
// SWIPE LEFT
mobile_menu.classList.remove("mobile-menu_open");
} else {
// SWIPE RIGTH
mobile_menu.classList.add("mobile-menu_open");
}
} else {
if(finalPoint.pageY < initialPoint.pageY) {
// SWIPE UP
} else {
// SWIPE DOWN
}
}
}
});

document.addEventListener("click", function(event) {
const target = event.target.closest(".mobile-menu__trigger");
if(target && target == mobile_trigger) {
mobile_menu.classList.toggle("mobile-menu_open");
} else if(event.target !== mobile_trigger && event.target !== mobile_menu) {
if( mobile_menu.classList.contains("mobile-menu_open") ) {
mobile_menu.classList.remove("mobile-menu_open");
}
}
});

mobile_menu.querySelectorAll("a").forEach(function(element) {
element.addEventListener("click", function(event) {
const anchor_href = event.currentTarget.getAttribute("href");
if(anchor_href.charAt(0) === "#") {
event.preventDefault();
if(anchor_href.length > 1) { // if #hash is not empty
const scroll_to_node = document.querySelector(event.currentTarget.hash);
if(scroll_to_node) {
SmoothScrollTo(scroll_to_node);
}
}
}
});
});

function SmoothScrollTo(element) {
if(element) {
element.scrollIntoView({
behavior: "smooth"
});
}
}
43 changes: 38 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,11 +205,6 @@

</a>

<!-- Navbar Toggler -->

<button class="navbar-toggler order-1" type="button" data-bs-toggle="collapse" data-bs-target=".hamburgeritems" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Centered Navbar Links -->
<div class="collapse navbar-collapse hamburgeritems centerdiv order-2 order-lg-0">
<ul class="navbar-nav center-links">
Expand Down Expand Up @@ -287,6 +282,44 @@

</div>


<!-- Navbar Toggler -->

<div class="mobile-menu ">
<div class="mobile-menu__trigger"><span></span></div>
<a class="page-scroll" href="index.html">
<i class="fa-solid fa-house"></i>
Home
</a>
<a class="page-scroll" href="Html-files/menu.html">
<i class="fa-solid fa-bars"></i> Menu
</a>
<a class="page-scroll" href="Html-files/services.html">
<i class="fa-solid fa-gear"></i> Services
</a>
<a class="page-scroll active-link" href="Html-files/login.html">
<i class="fa-solid fa-phone"></i> Contact Us
</a>
<a class="page-scroll active-link" href="Html-files/login.html">
<i class="fa-solid fa-question"></i> FAQ
</a>
<a class="page-scroll active-link" href="Html-files/login.html">
<i class="fa-solid fa-tag"></i> Offers
</a>
<a class="page-scroll active-link" href="Html-files/login.html">
<i class="fa-solid fa-star"></i> Rate Us
</a>
<a class="page-scroll active-link" href="Html-files/login.html">
<i class="fa-solid fa-sign-in"></i> Login
</a>
<a class="page-scroll" href="Html-files/signup.html">
<i class="fa-solid fa-user"></i> Sign-Up
</a>
<a class="page-scroll" href="Html-files/cart.html">
Cart <i class="fa-solid fa-cart-shopping"></i>
</a>
</div>

<!-- End Navbar Links -->


Expand Down

0 comments on commit 645759f

Please sign in to comment.