Navegación fuera de lienzo Swipeable en Vanilla JavaScript

Vista prévia

Descripción

Este es un sistema de navegación off-Canvas amigable para móviles que permite a los usuarios alternar el menú usando eventos de deslizamiento en la vista móvil.

Funcionamiento

Cree el menú fuera del lienzo en la página.

<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>WikiCSS</a></li>

</ul>
</div>

Cree una superposición de fondo que aparezca cuando se conmute la navegación fuera del lienzo.

<div id="hamburger-menu__bg"></div>

Crear un botón de alternar hamburguesa para alternar la navegación fuera de lienzo.

<div id="hamburger-btn">

<span></span>

<span></span>

<span></span>
</div>

Los estilos primarios CSS/CSS3.

.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
}

El principal JavaScript para activar la navegación fuera de lienzo.

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;

});