Universal AJAX Live Search

Menú Push con CSS y JavaScript!

En este artículo vamos a ver cómo crear facilmente un menú animado que tiene un efecto "Push" al desplegarse desde el borde de la ventana del navegador , es decir, que empuja el bloque de contenido a la derecha o izquierda como si se asomara :D, esto lo lograremos con el uso de CSS y algunas líneas de JavaScript. Te invito a crear el tuyo! 

Aqui puedes ver el demo de como se verá tu menú al terminar y descargar en este enlace los archivos fuente del proyecto.

Primero que nada, necesitamos un documento HTML vacio, en donde pondremos nuestra estructura básica, nótese que es un documento HTML5 (lo sabemos por medio de la declaración <!doctype html> y el uso de bloques semánticos de contenido, como nav, section y header)

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menú Push Javascript</title>
</head>
<body>
<!--Aqui insertaremos los menús y los botones que detonarán la acción-->
</body>
</html>

 

Dentro del elemento body crearemos nuestros menús (en este caso vamos a crear el que se desliza de izquierda a derecha y viceversa, después tú podrás elegir cuál te gusta o funciona mejor para tu proyecto)

<!-- El elemento body debe tener la clase "cbp-spmenu-push", no olvides añadirsela -->

<!--Éste es nuestro primer menú, que se deslizara de derecha a izquierda al abrirse, lleva asignadas varias clases que en 
unos momentos explicaremos-->
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1"> <h3>Menú 1</h3> <a href="#">Elemento 1</a> <a href="#">Elemento 2</a> <a href="#">Elemento 3</a> <a href="#">Elemento 4</a> <a href="#">Elemento 5</a> <a href="#">Elemento 6</a> </nav> <!--Éste es nuestro primer menú, que se deslizara de izquierda a derecha al abrirse, igualmente tiene asignadas
varias clases que son útiles-->
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2"> <h3>Menú 2</h3> <a href="#">Elemento 1</a> <a href="#">Elemento 2</a> <a href="#">Elemento 3</a> <a href="#">Elemento 4</a> <a href="#">Elemento 5</a> <a href="#">Elemento 6</a> </nav>

 

Ahora ya tenemos listos los dos contenedores que tiene dentro los menús, nos falta una cosa más: los botones que van a ejecutar la acción de mostrar u ocultar los menús 

<div class="container">
    <header class="clearfix">
      <h1>Demo Menús Push</h1>
    </header>
    <div class="main">
        <section class="buttonset">
            <h2>Menús Push</h2>
            <!-- al presionar estos botones la clase"cbp-spmenu-open" se asigna al menú 
          y según sea el caso, la clase "cbp-spmenu-push-toleft" o "cbp-spmenu-push-toright" se asigna al elemento body -->
            <button id="showLeftPush">Ocultar/Mostrar Menu Push Izquierdo</button>
            <button id="showRightPush">Ocultar/Mostrar Menu Push Derecho</button>
        </section>
    </div>
</div>

 

Una vez teniendo estas lineas, guardaremos el documento como index.html, creamos dos subcarpetas dentro de la carpeta de nuestro proyecto, llamadas css y js.

Ahora y procederemos a insertar los estilos CSS, vamos a crear un documento llamado estilos.css que se guardará en la subcarpeta css y que después ligaremos a nuestro documento html, el contenido de estilos.css es el siguiente:

CSS

/* Estilos generales del documento */

body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #12C3BB;
}

.main, .container > header {
width: 90%;
max-width: 69em;
margin: 0 auto;
padding: 0 1.875em 3.125em 1.875em;
}

.container > header h1 {
font-size: 2.125em;
line-height: 1.3;
margin: 0 0 0.6em 0;
float: left;
font-weight: 400;
}

.main > section {
max-width: 260px;
width: 90%;
margin: 0 auto;
}


/* Estilos generales de los menús */
 
.cbp-spmenu {
    background: #18B992;
    position: fixed;
}
 
.cbp-spmenu h3 {
    color: #afdefa;
    font-size: 1.9em;
    padding: 20px;
    margin: 0;
    font-weight: 300;
    background: #086C78;
}
 
.cbp-spmenu a {
    display: block;
    color: #fff;
    font-size: 1.1em;
    font-weight: 300;
}
 
.cbp-spmenu a:hover {
    background: #3EE0F5;
}
 
.cbp-spmenu a:active {
    background: #3EE0F5;
    color: #47a3da;
}
 
/* Clases aplicadas a los menús para determinar su apariencia */
 
.cbp-spmenu-vertical {
    width: 240px;
    height: 100%;
    top: 0;
    z-index: 1000;
}
 
.cbp-spmenu-vertical a {
    border-bottom: 1px solid #31FDEC;
    padding: 1em;
}
 
 
/* Clases aplicadas a los menús verticales para determinar su comportamiento en conjunto con la animación */
 
.cbp-spmenu-left {
    left: -240px;
}
 
.cbp-spmenu-right {
    right: -240px;
}
 
.cbp-spmenu-left.cbp-spmenu-open {
    left: 0px;
}
 
.cbp-spmenu-right.cbp-spmenu-open {
    right: 0px;
}
 
 
/* Clases aplicadas al elemento body */
 
.cbp-spmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}
 
.cbp-spmenu-push-toright {
    left: 240px;
}
 
.cbp-spmenu-push-toleft {
    left: -240px;
}
 
/* Transiciones CSS */
 
.cbp-spmenu,
.cbp-spmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
 
/*Estilos Botones*/


.main > section button {
border: none;
background: #0DB693;
color: #fff;
padding: 1.5em;
display: block;
width: 100%;
cursor: pointer;
margin: 10px 0;
font-size: 0.8em;
}

.main section button.active {
background: #0DB693;
}

.main section button.disabled {
background: #aaa;
pointer-events: none;
}

.main section button:hover {
background: #42D4B6;
}

 

Finalmente, para que estos menús se pongan en movimiento, vamos a programar la interacción  por medio de JavaScript y el uso de algunas funciones del paquete llamado Classie, vamos a insertar estas líneas en la parte final del documento html, justo antes de cerrar la etiqueta <body>:

JAVASCRIPT

<script type="text/javascript">

//Primero declaramos las variables que se van a utilizar

var     menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
        menuRight = document.getElementById( 'cbp-spmenu-s2' ),
        showLeftPush = document.getElementById( 'showLeftPush' ),
        showRightPush = document.getElementById( 'showRightPush' ),
        body = document.body;
 
//Después añadimos las funciones necesarias para que el botón desencadene la acción por medio del click del usuario

showLeftPush.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( body, 'cbp-spmenu-push-toright' );
    classie.toggle( menuLeft, 'cbp-spmenu-open' );
    disableOther( 'showLeftPush' );
};
showRightPush.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( body, 'cbp-spmenu-push-toleft' );
    classie.toggle( menuRight, 'cbp-spmenu-open' );
    disableOther( 'showRightPush' );
};
 
//Esta función deshabilita el botón que no corresponda al menú que está activo, 
//solo para este ejercicio, si se usa un solo menú no es esencial tenerla

function disableOther( button ) {

    if( button !== 'showLeftPush' ) {
        classie.toggle( showLeftPush, 'disabled' );
    }
    if( button !== 'showRightPush' ) {
        classie.toggle( showRightPush, 'disabled' );
    }
}

</script>

 

Con estos sencillos pasos, ahora solo resta ligar al documento html la hoja de estilos que creamos y el paquete Classie.js (lo puedes descargar directamente del enlace a los archivos fuente del proyecto, y se ubicará en la subcarpeta js) lo haremos insertando estas líneas antes de cerrar la etiqueta <head> de nuestro documento:

<link rel="stylesheet" type="text/css" href="css/estilos.css" />
<script src="js/classie.js"></script>

 

Hemos terminado! 

 

Espero que esta técnica te haya agradado, y que estos Menús Push sean de utilidad para tu siguiente proyecto web, son fáciles de hacer y aportan mucho dinamismo a la interacción con el usuario :)  Nos vemos en el siguiente artículo!

Zae Vega. Diseñadora Web, Amante del Café, la Usabilidad y Front-End.

Dudas o comentario? Encuéntrame en twitter como @ZaeVega