Tengo un menú creado con CSS, cuando el usuario toca, el menú se desliza y cuando toca el fondo, se desliza nuevamente en el dispositivo móvil.
El problema es que quiero que el menú funcione como en el menú de la aplicación móvil, en lugar de tocar el fondo para deslizarlo, quiero que el usuario pueda deslizar y ocultar el menú.
Violín: https://jsfiddle.net/livewirerules/ek4tkrc0/2/
A continuación se muestra el 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);Cualquier ayuda será apreciada
Puede usar eventos touchstart, touchmove, touchend en #nav. Aquí hay un ejemplo
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);Ejemplo de trabajo: https://jsfiddle.net/cnexans/Ln60t4h6/1/