Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Front-End

Haciendo un Menú de Navegación Lateral Deslizante para Diseños Responsivos

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by David Castrillón (you can also view the original English article)

En este tutorial, crearás un menú de navegación lateral expandible con JavaScript y CSS. El producto final aparecerá como se muestra a continuación:

Sliding Side Navigation Menu

El Marcado

Para empezar, vamos a añadir algo de marcado para nuestro menú lateral:

Aquí puedes ver que creamos un div para el menú lateral con la clase sidenav. A continuación agregamos la barra superior de navegación a través de una etiqueta <nav> y estamos utilizando un SVG para nuestro icono del menú lateral.

El atributo onclick del icono y el botón de cerrar activará algunos JavaScript, que añadiremos a continuación.

Recuerda poner todo el contenido de tu sitio web dentro del contenedor div id="main"  para que se deslice hacia la derecha.

JavaScript

A continuación, vamos a agregar el JavaScript para hacer las funciones openNav y closeNav.

CSS

Por último, tenemos que darle estilo a nuestra página con algunos CSS para el menú lateral y nuestros enlaces:

Nota: El body {overflow-x: hidden;} es necesario para asegurar que el desplazamiento horizontal no aparece cuando se usa con el CSS existente.

Ahora puedes echar un vistazo a tu menú y probarlo en tu navegador.

Utilizando jQuery

Si quieres crear el menú del lado de JavaScript utilizando jQuery, puedes hacerlo reemplazando el JavaScript que he proporcionado anteriormente con la siguiente sección:

Eliminando el Desplazamiento

Para que el menú aparezca sin ninguna animación de deslizamiento, simplemente realiza cambios en la propiedad transition del CSS, como se muestra de una forma abreviada a continuación:

Esto hará que el cambio aparezca al instante como si no hubiera ningún retraso en la propiedad transition. El valor predeterminado que usamos es 0,5.

Conclusión

Crear un menú lateral sólo toma unas pocas líneas de código y no es necesario utilizar muchos recursos. También, si jQuery ya está en la página para otras tareas, el trabajo puede ser hecho con menos líneas de código y puede ser modificado más allá para requisitos particulares.

Hacer el código responsivo para que trabaje con resoluciones de pantalla de diferentes dispositivos, es simplemente un caso de modificar el CSS añadiendo media queries para los casos concretos.

Para llevar esto más lejos, podrías querer estilizar tu menú con un framework CSS como Bootstrap o Bulma.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.