Pequeño menú fuera de lienzo con JavaScript y CSS3

Vista prévia

Descripción

Un menú push para móviles fuera de lienzo con un botón de palanca de hamburguesas construido con CSS3 y un poco de magia JavaScript.

Funcionamiento

Crea un menú de barra lateral fuera de lienzo siguiendo el marcado como se muestra a continuación.

<aside class="sidebar">

<nav class="nav">


<ul class="nav-items">



<li class="nav-title">Pages</li>



<li><a href="#" class="nav-link">Home</a></li>



<li><a href="#" class="nav-link">Products</a></li>



<li><a href="#" class="nav-link">Services</a></li>



<li><a href="#" class="nav-link">About</a></li>



<li><a href="#" class="nav-link">News</a></li>


</ul>

<div class="sidebar-separator"></div>

<ul class="nav-items">


<li class="nav-title">More</li>


<li><a href="#" class="nav-link">Contact</a></li>


<li><a href="#" class="nav-link">Support</a></li>


<li><a href="#" class="nav-link">Careers</a></li>

</ul>

</nav>
</aside>

Crea un botón de hamburguesa para alternar el menú fuera del lienzo.

<div class="hamburger">

<div class="bar"></div>

<div class="bar"></div>

<div class="bar"></div>
</div>

Envuelve el contenido principal junto con el menú del lienzo y el botón de alternar hamburguesas en un recipiente. Toda la estructura de marcado debe ser así:

<div class="container">

<main class="main" role="main">


Main Content Goes Here

</main>

<aside class="sidebar">


<nav class="nav">



<ul class="nav-items">




<li class="nav-title">Pages</li>




<li><a href="#" class="nav-link">Home</a></li>




<li><a href="#" class="nav-link">Products</a></li>




<li><a href="#" class="nav-link">Services</a></li>




<li><a href="#" class="nav-link">About</a></li>




<li><a href="#" class="nav-link">News</a></li>



</ul>


<div class="sidebar-separator"></div>


<ul class="nav-items">



<li class="nav-title">More</li>



<li><a href="#" class="nav-link">Contact</a></li>



<li><a href="#" class="nav-link">Support</a></li>



<li><a href="#" class="nav-link">Careers</a></li>


</ul>


</nav>

</aside>

<div class="hamburger">


<div class="bar"></div>


<div class="bar"></div>


<div class="bar"></div>

</div>
</div>

Los estilos CSS básicos.

html {

box-sizing: border-box;

overflow: hidden;
}

*, *:before, *:after { box-sizing: inherit; }

html, body { height: 100%; }

body {

background: #fff;

font-family: 'Roboto', sans-serif;

line-height: 1.5em;

color: #888;
}

.container {

position: relative;

overflow-x: hidden;

height: 100%;

width: 100%;
}

El CSS para el contenido principal.

.main {

height: 100%;

position: relative;

transition-property: transform;
}
.content { margin: 50px 50px; }

El CSS para el menú de la barra lateral fuera de lienzo.

.sidebar {

position: fixed;

z-index: 5;

top: 0;

left: 0;

height: 100%;

width: 260px;

background: #1d2127;

border-right: 3px solid #0f1114;

overflow: hidden;

-webkit-transform: translate3d(-260px, 0, 0);

transform: translate3d(-260px, 0, 0);

transition-property: transform;
}

.sidebar, .sidebar a { color: #abb4be; }

.nav { margin-top: 100px; }

.nav-items {

margin: 0;

padding: 0;

list-style: none;
}

.nav-title {

display: block;

padding: 10px 50px;

text-transform: uppercase;

font-weight: 600;

color: #465162;
}

.nav-link {

display: block;

padding: 10px 50px;

text-decoration: none;

transition: background-color 0.3s ease;
}

.nav-link:hover { background-color: #282d36; }

.sidebar-separator {

margin: 30px;

height: 2px;

background-color: #000;

border-bottom: 1px solid #2b313a;
}

El CSS para el botón de alternar hamburguesa.

.hamburger {

display: block;

position: fixed;

left: 50px;

top: 20px;

cursor: pointer;

z-index: 10;

border-radius: 5px;

background-color: #3498db;

border: 2px solid #ddd;

padding: 10px 7px;

width: 50px;

height: 46px;

transition-property: background-color, border-color;
}

.bar {

display: block;

position: relative;

background-color: #ddd;

width: 100%;

height: 4px;

border-radius: 2px;

margin: 0 auto;

transition-property: transform, opacity, background-color, width;
}

.bar:first-child { top: 0; }

.bar:nth-child(2) { opacity: 1; }

.bar:last-child { bottom: 0; }

.hamburger:hover { border-color: #fff; }

.hamburger:hover .bar { background-color: #fff; }

.bar + .bar { margin-top: 5px; }

El CSS para mostrar el menú de la barra lateral fuera de lienzo.

.main, .sidebar, .hamburger, .bar {

transition-duration: 0.3s;

transition-timing-function: ease-in-out;
}

.show-sidebar .main {

-webkit-transform: translate3d(260px, 0, 0);

transform: translate3d(260px, 0, 0);
}

.show-sidebar .sidebar {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);
}

.show-sidebar .hamburger {

background-color: #282d36;

border-color: #0f1114;
}

.show-sidebar .bar { background-color: #abb4be; }

.show-sidebar .bar:first-child {

width: 120%;

-webkit-transform: rotate(45deg) translate(5px, 8px);

transform: rotate(45deg) translate(5px, 8px);
}

.show-sidebar .bar:nth-child(2) { opacity: 0; }

.show-sidebar .bar:last-child {

width: 120%;

-webkit-transform: rotate(-45deg) translate(4px, -8px);

transform: rotate(-45deg) translate(4px, -8px);
}

El núcleo JavaScript.

var container = document.querySelector('.container');
var main = document.querySelector('.main');

function toggleSidebar(){

isShowingSidebar() ? hideSidebar() : showSidebar();
}

function showSidebar(){

container.classList.add('show-sidebar');
}

function hideSidebar(){

container.classList.remove('show-sidebar');
}

function isShowingSidebar(){

return container.classList.contains('show-sidebar');
}

document.querySelector('.hamburger').addEventListener('click', toggleSidebar, false);

container.addEventListener('click', function(e){

if(isShowingSidebar() && main.contains(e.target)){



e.preventDefault();



hideSidebar();

}
}, true);