Menú de cajón deslizante de JavaScript/CSS puro-bpenDrawer

Vista prévia

Descripción

Un menú de cajón móvil basado en JS/CSS puro que se desliza desde el borde de la pantalla al activar, similar al menú de navegación fuera de lienzo que ha visto en algunas aplicaciones móviles.

Funcionamiento

Cargue el script bpen. Drawer. js en el documento.

<script src="js/bpen.drawer.js">

Cree un elemento DIV vacío para el menú del cajón móvil.

<div id="mainMenu"></div>

Añada elementos al menú y coloque el menú en el lado derecho del documento.

var drawer;

window.addEventListener("load", function(){


drawer = bpen.drawer("mainMenu",{



Items : [{




Text : "home",




Url : "index.html"




},{




Text: "contact",




Url : "contact.html"




}



],



Anchor : 'right'


});

},false);

Los estilos CSS básicos para el menú de cajón móvil. Siéntase libre de modificar & reemplazarlos para hacer sus propios estilos.

.bpen-drawer {

position: fixed;

top: 0px;

height: 100%;

width: 225px;

background-color: #34BC9D;

z-index: 1000;

padding: 0 10px;

transition: 0.5s ease;
}

.bpen-drawer-left { left: -245px; }

.bpen-drawer-right { right: -245px; }

.bpen-drawer-left.expanded { left: 0px; }

.bpen-drawer-right.expanded { right: 0px; }

.bpen-toggle-pad {

position: absolute;

top: 0px;

width: 25px;

height: 100%;

color: #fff;

text-align: center;

cursor: pointer;

background: url(../img/icon-menu.svg) no-repeat center center;

background-size: 25px 25px;

-webkit-transition: 3s ease;

-moz-transition: 3s ease;

-o-transition: 3s ease;

-ms-transition: 3s ease;

transition: 0.5s ease;
}

.bpen-toggle-pad-left {

right: -30px;

text-align: center;
}

.bpen-toggle-pad-right {

left : -30px;

text-align: center;
}

.bpen-toggle-pad-left.expanded { right: 0px; }

.bpen-toggle-pad-right.expanded { left: 0px; }

.bpen-drawer-header {

position: relative;

height: 40px;

width: 100%;

top: 0px;

left: 0px;
}

.bpen-drawer-items {

list-style-type: none;

padding-left: 0px;

width: 100%;

margin-top: 0px;
}

.bpen-drawer-items li {

padding: 7px 0px 7px 0px;

width: 100%;

margin: -1px 0px 0px 0px;

border-top: 1px solid #46CFB0;

border-bottom: 1px solid #46CFB0;

cursor: pointer;

font-size: 1.5em;
}

.bpen-drawer-items li a {

display: block;

text-decoration: none;

font-weight: bold;

color : #fff;

padding-left: 10px;

width: 100%;
}