Author: | kaungmyatlwin |
---|---|
Views Total: | 551 views |
Official Page: | Go to website |
Last Update: | January 3, 2018 |
License: | MIT |
Preview:

Description:
This is a mobile-friendly off-canvas navigation system that allows the users to toggle the menu using swipe events in mobile view.
How to use it:
Create the off-canvas menu on the page.
<div id="hamburger-menu"> <ul class="list"> <li class="active"><a>Home</a></li> <li><a>About</a></li> <li><a>Contact</a></li> <li><a>Blog</a></li> <li><a>CSSScript</a></li> </ul> </div>
Create a background overlay that appears when the off-canvas navigation is toggled.
<div id="hamburger-menu__bg"></div>
Create a hamburger toggle button to toggle the off-canvas navigation.
<div id="hamburger-btn"> <span></span> <span></span> <span></span> </div>
The primary CSS/CSS3 styles.
.hamburger-drawer, #invis-drawer, #hamburger-menu, #hamburger-menu__bg { position: fixed; min-height: 100vh } #invis-drawer { width: 5%; background-color: #444 } #hamburger-menu { width: 60%; background-color: #f1f1f1; z-index: 100; transform: translate3d(-100%, 0, 0) } #hamburger-menu::after { content: ''; position: fixed; top: 0; right: -20px; width: 20px; min-height: 100vh } #hamburger-menu ul.list { list-style: none; padding: 0 } #hamburger-menu ul.list li { padding: 15px } #hamburger-menu ul.list li.active { background-color: rgba(0, 0, 0, 0.1) } #hamburger-menu__bg { z-index: -1; width: 100%; background-color: rgba(0, 0, 0, 0.5) } #hamburger-btn { position: relative; height: 22px; margin-left: 20px; display: flex; flex-direction: column; justify-content: space-around } #hamburger-btn span { width: 30px; height: 2px; background-color: #000 }
The main JavaScript to activate the off-canvas navigation.
var hamburgerDrawer = document.getElementById('hamburger-menu'); var hamburgerBtn = document.getElementById('hamburger-btn'); var hamburgerDrawerBg = document.getElementById('hamburger-menu__bg'); var axisCords; var hamburgerDrawerWidth = hamburgerDrawer.clientWidth; var oneByForthScreen = window.innerWidth / 4; var openStatus = false; function drawToStart() { hamburgerDrawer.animate([ { transform: `translate3d(${axisCords ? axisCords + 'px' : 0 + 'px'}, 0, 0)` }, { transform: 'translate3d(-100%, 0, 0)' } ], { duration: 500, easing: 'ease-in-out' }); hamburgerDrawer.style.transform = 'translate3d(-100%, 0, 0)'; openStatus = false; } function drawToEnd() { hamburgerDrawer.animate([ { transform: `translate3d(${axisCords ? axisCords + 'px' : -100 + '%'}, 0, 0)` }, { transform: 'translate3d(0, 0, 0)' } ], { duration: 500, easing: 'ease-in-out' }); hamburgerDrawer.style.transform = 'translate3d(0, 0, 0)'; openStatus = true; } // Click on Menu Button to Drawer hamburgerBtn.addEventListener('click', drawToEnd); // Click on Background to Close hamburgerDrawerBg.addEventListener('click', function(){ if (openStatus) drawToStart(); }); hamburgerDrawer.addEventListener('touchmove', function(e) { axisCords = e.changedTouches[0].pageX - hamburgerDrawerWidth; if (axisCords > 0) axisCords = 0; this.style.transform = 'translate3d(' + axisCords + 'px, 0, 0)'; }); hamburgerDrawer.addEventListener('touchend', function(e) { var endPoint = e.changedTouches[0].pageX; var isOverThreshold = endPoint > oneByForthScreen && endPoint < hamburgerDrawerWidth; if (endPoint < oneByForthScreen) { drawToStart(); } else if (isOverThreshold) { drawToEnd(); } else { openStatus = true; } axisCords = null; });