Navegación off-Canvas minimalista y amigable para móviles

Vista prévia

Descripción

Una navegación móvil minimalista que permite revelar un menú de barra lateral fuera de lienzo con una superposición de página completa cuando el usuario haga clic en el botón de alternar hamburguesa. Construido encima de JavaScript puro y CSS/CSS3. Sin dependencias como jQuery.

Funcionamiento

Cree un botón de alternancia de menú como este:

<span id="shadowbox" onclick="menuToggle()"></span>

Cree la navegación fuera del lienzo.

<nav>

<button id="navBtn" onclick="menuToggle()">


<div></div>


<div></div>


<div></div>


<div></div>

</button>

<ul id="listMenu">


<li><a href="">Lorem</a></li>


<li><a href="">Ipsum</a></li>


<li><a href="">Sit</a></li>


<li><a href="">Amet</a></li>


<li><a href="">Sis</a></li>


<li><a href="">Amus</a></li>


<li><a href="">Dolor</a></li>

</ul>
</nav>

El CSS para el botón de alternancia de menú.

span#shadowbox {

position: absolute;

transition: ease-in-out .5s;
}

span#shadowbox.visible {

transition: ease-in-out .5s;

background: rgba(0,0,0,.7);

top: 0;

right: 0;

bottom: 0;

left: 0;
}

El CSS para la navegación fuera de lienzo.

nav {

position: fixed;

top: 0;

bottom: 0;
}

nav button {

position: relative;

background: #99f;

width: 48px;

height: 48px;

padding: 8px;

left: 0px;

cursor: pointer;

transition: ease-in-out .3s;
}

nav button div {

background: #fff;

width: 100%;

height: 5px;

margin: 5px 0 0;

float: left;

border-radius: 9px;

transition: ease-in-out .12s;
}

nav button div:nth-child(3) { margin: -5px 0 0 0; }

nav button div:first-child { margin: 0; }

nav button.navOpen {

left: 250px;

background: #f33;

transition: ease-in-out .3s;
}

nav button.navOpen div {

width: 100%;

margin: 0;

transition: ease-in-out .3s;
}

nav button.navOpen div:nth-child(1), nav button.navOpen div:nth-child(4) { background: transparent; }

nav button.navOpen div:nth-child(2) { transform: rotate(45deg); }

nav button.navOpen div:nth-child(3) {

margin: -5px 0 0 0;

transform: rotate(-45deg);
}

nav ul#listMenu {

position: absolute;

background: #3c3c3c;

width: 250px;

top: 0;

bottom: 0;

left: -250px;

overflow: auto;

box-shadow: 0 0 10px 0px rgba(0,0,0,0);

transition: ease-in-out .3s;
}

nav ul#listMenu.listOpen {

left: 0px;

box-shadow: 0 0 10px 0px rgba(0,0,0,.5);

transition: ease-in-out .3s;
}

nav ul#listMenu li {

width: 100%;

padding: 0 20px;

float: left;

box-sizing: border-box;
}

nav ul#listMenu li a {

width: 100%;

color: #fff;

padding: 20px 10px 10px 10px;

border-bottom: 1px solid #fff;

float: left;

box-sizing: border-box;
}

nav ul#listMenu li:last-child a { border: none; }

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

function menuToggle(){



if (document.getElementById("navBtn").className == "navOpen") {


document.getElementById("navBtn").className = "";


document.getElementById("listMenu").className = "";


document.getElementById("shadowbox").className = "";

} else {


document.getElementById("navBtn").className = "navOpen";


document.getElementById("listMenu").className = "listOpen";


document.getElementById("shadowbox").className = "visible";

}
}