I have menu built using CSS, when the user touches, the menu slides out and when he touches the background it slides in again on mobile.
The problem is that i want to make the menu work like in mobile app menu, rather than touching the background to slide in, i want the user to able able swipe and hide the menu
Fiddle : https://jsfiddle.net/livewirerules/ek4tkrc0/2/
Below is the css
nav ul li { line-height: 50px; }
#nav {
padding: 20px;
text-align: left;
position: fixed;
height: 100%;
top: 0;
width: 60%;
max-width: 275px;
background: rgb(255, 219, 58);
box-shadow: -3px 0 10px rgba(0,0,0,0.2);
overflow-y: auto;
z-index: 99;
}
#nav:not(:target) {
left: -100%;
transition: left .5s;
}
#nav:target {
left: 0;
transition: left .25s;
}
#nav:target + #nav_modal { display: block; }
#nav_modal {
display: none;
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.8);
overflow: hidden;
z-index: 9;
}
JavaScript
function initialHash() {
'use strict';
window.location.href = "#";
}
document.getElementById('nav_modal').addEventListener('click', initialHash, false);
Any help will be appreciated
You can use touchstart, touchmove, touchend events on #nav. Here is an example
function initialHash() {
'use strict';
window.location.href = "#";
}
function handleTouch(e) {
var x = e.changedTouches[0].clientX;
var total = this.clientWidth;
var position = x - total;
if ( position < 0 ) this.style.left = (x-total) + 'px'
else if (position >= 0) this.style.left = 0 + 'px'
}
function handleTouchEnd(e) {
var x = e.changedTouches[0].clientX;
var total = this.clientWidth;
var position = x - total;
this.style.left = "";
if ( position <= -total*0.5 ) initialHash();
}
document.querySelector('#nav').addEventListener('touchstart', handleTouch, false)
document.querySelector('#nav').addEventListener('touchmove', handleTouch, false)
document.querySelector('#nav').addEventListener('touchend', handleTouchEnd, false)
document.getElementById('nav_modal').addEventListener('click', initialHash, false);
Working example: https://jsfiddle.net/cnexans/Ln60t4h6/1/