forked from ayush-that/FinVeda
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request ayush-that#708 from VijaySamant4368/hamburger-arrow
Changed Hamburger menu
- Loading branch information
Showing
3 changed files
with
242 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 1,153 @@ | ||
|
|
||
|
|
||
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .overlay { | ||
| width: 100%; | ||
| height: 100%; | ||
| position: absolute; | ||
| z-index: 1; | ||
| top: 0; | ||
| left: 0; | ||
| background-color: rgba(51,32,195,0.5); | ||
| opacity: 0; | ||
| visibility: hidden; | ||
| transition: all 0.3s; | ||
| } | ||
| .mobile-menu { | ||
| top: 0; | ||
| left: 0; | ||
| width: 70vw; | ||
| height: 100vh; | ||
| position: fixed; | ||
| z-index: 2; | ||
| background: rgba(51,32,195,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:after { | ||
| content: ""; | ||
| position: absolute; | ||
| bottom: 0; | ||
| left: 25%; | ||
| width: 0; | ||
| height: 2px; | ||
| background-color: white; | ||
| transition: width 0.3s; | ||
| } | ||
|
|
||
| .mobile-menu a:hover:after { | ||
| width: 50%; | ||
| } | ||
|
|
||
| .mobile-menu .active-link { | ||
| background: | ||
| linear-gradient(white 0 0) bottom/ 60% 2px no-repeat, | ||
| transparent; | ||
| } | ||
| /* .mobile-menu a:hover { | ||
| box-shadow: inset 0 0 1rem rgba(255,255,255,0.7); | ||
| border-left: 3px solid #fff; | ||
| border-right: 3px solid #fff; | ||
| } */ | ||
| .mobile-menu__trigger { | ||
| cursor: pointer; | ||
| content: ""; | ||
| position: absolute; | ||
| z-index: 3; | ||
| width: 3rem; | ||
| height: 3rem; | ||
| border-radius: 50%; | ||
| top: 2rem; | ||
| right: -5rem; | ||
| background: rgba(51,32,195,0.5); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| .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; | ||
| right: 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; | ||
| right: 0; | ||
| transform: rotate(30deg); | ||
| } | ||
| .mobile-menu__trigger:hover span::after { | ||
| width: 50%; | ||
| top: 3px; | ||
| right: 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 { | ||
| left: 0; | ||
| } | ||
| .mobile-menu_open .mobile-menu__trigger:hover span::before { | ||
| transform: rotate(-30deg); | ||
| } | ||
| .mobile-menu_open .mobile-menu__trigger:hover span::after { | ||
| transform: rotate(30deg); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 1,68 @@ | ||
| 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" | ||
| }); | ||
| } | ||
| } |