Manualdewebs

Menú lateral

El código JavaScript

Para implementar esta funcionalidad, que mantendrá el menú oculto a la izquierda y lo mostrará/ocultará gracias a un botón tipo hambueguesa, deberemos seguir dos pasos, añadir el javascript que gestionará los elementos y funcionalidades del nuevo menú y por otro lado los estilos css que sjuatrán las funcionalidades del menú. Todos los archivos necesarios para implementar este menú los encontrarás al final de esta página.

01. JavaScript

El primer paso será añadir el código javaScript. Lo haremos en la pestaña "General" dentro del bloque "Código HTML adicional . A continuación aclaramos algunos detalles del script adaptado a la plantilla de Gesio:

$(document).ready(function () {

$( "body" ).addClass( "menuCerrado" ); // Añadimos la clase al body, de esta manera siempre sabremos en que estado esta el menú desde la etiqueta body y podremos controlar los elementos que necesitemos vía CSS

$('nav').attr('id', 'sidebar-wrapper'); // Le cambiamos el ID a la etiqueta nav
$( "header" ).before( $( "#sidebar-wrapper" ) ); // Movemos el menú a donde nos interesa tenerlo

$("#cabecera").prepend("...");// Aquí creamos la capa que hará la función de máscara de contenido que evitará que podamos hacer click en otros elementos de la web cuando el menú está abierto (código completo en la descarga).
$("#cabecera").prepend("..."); // Por último creamos el botón hamburguesa dentro de la capa que nos interesa (código completo en la descarga).

  var trigger = $('.hamburger'),

     isClosed = false;

    trigger.click(function () {
      hamburger_cross();      
    });

    function hamburger_cross() { // Esta función es donde reemplazaremos las clases de los elementos clave según el estado del menú y que nos permitirá aplicarles los estilos necesarios para cada momento.

      if (isClosed == true) {          

        trigger.removeClass('is-open');
        trigger.addClass('is-closed');
        isClosed = false;
$( 'body' ).removeClass( 'menuAbierto' );
$( 'body' ).addClass( 'menuCerrado' );
$( '#mascara-contenido' ).removeClass( 'mostrar' );
$( '#mascara-contenido' ).addClass( 'ocultar' );
      } else {   

        trigger.removeClass('is-closed');
        trigger.addClass('is-open');
        isClosed = true;
$( 'body' ).removeClass( 'menuCerrado' );
$( 'body' ).addClass( 'menuAbierto' );
$( '#mascara-contenido' ).removeClass( 'ocultar' );
$( '#mascara-contenido' ).addClass( 'mostrar' );
      }
  }
 
  $('[data-toggle="offcanvas"]').click(function () {
        $('#base1024').toggleClass('toggled');
  }); 
});

02. Añadir estilos

Los estilos que definen los nuevos funcionamientos estan recogidos en el descargable de abajo.

 

Descarga el código