CODEWITHSUNDEEP
javascriptjquerycss
LiveEn
LiveEn

Reputation: 3253

Add swipe ability to hide an HTML menu

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

Upvotes: 3

Views: 4323

Answers (1)

cnexans
cnexans

Reputation: 994

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/

Upvotes: 3

Related Questions