Menú Responsive Vertical con Sass+CSS, adaptación a Bootstrap4 y JavaScript

En este HowTo podrás crear un menú Responsive con desplazamiento vertical de 2 niveles utilizando HTML5, CSS+Sass y JavaScript.

Los pasos que vamos a seguir para realizar el menú son los siguientes:

  • Vamos a crear el menú haciendo uso de listas de HTML5 y en caso de necesitar un segundo nivel anidaremos una segunda lista dentro del elemento <li> que hará de padre.
  • Para la maquetación vamos a usar el lenguaje Sass para poder controlar el CSS de una manera más eficaz.
  • Y por último con JavaScript, añadiremos las interacciones que pueda a realizar el usuario tanto en la versión de escritorio como en la de responsive.

Este será el aspecto del menú una vez desplegado en su versión de escritorio:

Y este será su aspecto una vez desplegado en su versión Responsive.

Una prueba funcional se puede comprobar siguiendo el siguiente enlace

Creando el menú con elementos de lista HTML

La forma más coherente para crear el menú es usar elementos <ul> de HTML5 que nos permiten crear listas. He incluido una clase .container ya que haremos uso de bootstrap para centrar el menú.

El siguiente paso es incluir el menú y que vamos a dividir en 2 partes:

  • Por un lado tenemos que incluir la barra de navegación Responsive.
  • Y por otro lado el menú que contiene todos los elementos.

En el segunda parte incluiremos el menú y en caso de tener un segundo nivel le asignaremos la clase .dropdown y anidaremos otro elemento <ul> dentro del elemento que hará de padre.

Maquetación con Sass

Para empezar con la maquetación con Sass vamos a tener en cuenta 3 pasos importantes:

  • Necesitamos definir los breakpoints que nos van a permitir definir los tamaños para una medida concreta de pantalla. En este caso vamos a usar los breakpoints que usa BootStrap4. A mayores crearemos un @mixin que va a crear las Media Queries con el breakpoint que se le ha pasado.
  • También vamos a incluir variables con los códigos colores que se aplicarán al menú para que sea más sencillo portarlo a otro proyecto.
  • Y por último crearemos el menú usando Sass para luego poder compilar su código a CSS.

Creando breakpoints y @mixin

Los breakpoints que usa Bootstrap4 son los siguientes:

  • xs (para teléfonos con medidas de hasta 768px de ancho)
  • sm (para tablets con medidas igual o superior a 768px de ancho)
  • md (para pequeñas pantallas con medidas igual o superior a 992px de ancho)
  • lg (para pantallas con medidas igual o superior a 1200px de ancho)

En nuestro caso no vamos a complicarnos la vida y usaremos el breakpoint «md» para pantallas pequeñas. Por lo que para usar el @mixin y declarar propiedades para este dispositivo usaremos:

Incluyendo variables para gestionar los colores

Creando el menú con Sass

Incluyendo Interactividad con JavaScript

Necesitamos crear un evento que nos permita cambiar el estado del icono del menú responsive. Por lo que en caso de hacer click se cambiará el icono de este y añadirá una clase .open o .close para mostrar o ocultar el menú.

Por último crearemos un evento de scroll porque si el usuario hace scroll en la página el menú desaparecerá y nosotros no queremos privar del menú al usuario. Por lo que en caso de desplazarse más allá de los píxeles marcados, cambiaremos la propiedad display del menú a fixed (que lo hará fijo)

Una prueba funcional se puede comprobar siguiendo el siguiente enlace

Etiquetado

Deja un comentario

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