Responsive SideBar Menú con jQuery3>y Sass

En este HowTo aprenderás a crear un menú lateral responsive desde cero, utilizando jQuery 3> y Sass.

Antes de empezar a crear el menú vamos hacer una recopilación de las tecnologías y técnicas web que vamos a necesitar:

  • Haremos uso de HTML5 para crear el documento y las listas del menú.
  • Para crear eventos, efectos y cambios de estilos, haremos uso de jQuery 3.3>
  • Para la maquetación del menú usaremos CSS + Sass. Esto nos facilitará el manejo y uso de los media queries para hacer el menú responsive.
  • Aunque no es necesario utilizaré el framework Fontawesome para incluir los iconos que pueda necesitar el documento.

Todos los  ficheros para crear el menú se pueden descargar desde Github.

Previa del menú en ordenador

Previa del menú en móviles y tablets

Cabecera de nuestro documento HTML5

Empezaremos creando la cabecera del documento con sus meta etiquetas, links y scripts a los recursos que vamos a necesitar.

Contenido del menú y resto del documento

A continuación vamos a incluir el contenido de nuestro menú responsive (sideNav) y también la correspondientes elementos que componen el documento.

Estilos del menú usando Sass

Para poder crear los estilos es importante tener una nociones básicas de cómo trabajar con Sass, para luego saber como compilarlos correctamente. La estructura Sass está disponibles desde GitHub.

Los breakpoints que tengo declarados son idénticos o muy parecidos a los que usa el framework Bootstrap. Por lo que si queremos que funcione correctamente haremos uso del siguiente mixin.

Por último vamos a incluir los scripts creados con jQuery

Haciendo uso de jQuery incluimos eventos al abrir y cerrar menús, eventos para desplegar submenús y efectos para redimensionar el menú y mover iconos de redes sociales cuando el usuario hacer scroll en la página. Es todo muy personalizable según el gusto de cada uno.

… previsualización del menú desde jsFiddle

 

Etiquetado

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.