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

Spanish (Español) translation by David Castrilló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:

El Marcado

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

  <div id="sideNavigation" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">About</a>
    <a href="#">Features</a>
    <a href="#">Contact Us</a>
  </div>

  <nav class="topnav">
    <a href="#" onclick="openNav()">
      <svg width="30" height="30" id="icoOpen">
          <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
          <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
          <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
      </svg>
    </a>
  </nav>
  
  <div id="main">
  <!-- Add all your websites page content here  -->
  </div>

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.

<script>
function openNav() {
    document.getElementById("sideNavigation").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("sideNavigation").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
}
</script>

CSS

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

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
    overflow:hidden;
    width:100%;
}
body {
  overflow-x: hidden;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

a svg{
  transition:all .5s ease;

  &:hover{
    #transform:rotate(180deg);
  }
}

#ico{
  display: none;
}

.menu{
  background: #000;
  display: none;
  padding: 5px;
  width: 320px;
  @include border-radius(5px);

  #transition: all 0.5s ease;

  a{
    display: block;
    color: #fff;
    text-align: center;
    padding: 10px 2px;
    margin: 3px 0;
    text-decoration: none;
    background: #444;

    &:nth-child(1){
      margin-top: 0;
      @include border-radius(3px 3px 0 0 );
    }
    &:nth-child(5){
      margin-bottom: 0;
      @include border-radius(0 0 3px 3px);
    }

    &:hover{
      background: #555;
    }
  }
}

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:

$('.topnav a').click(function(){
  $('#sideNavigation').style.width = "250px";
  $("#main").style.marginLeft = "250px";
});

$('.closebtn').click(function(){
  $('#sideNavigation').style.width = "0";
  $("#main").style.marginLeft = "0";
});

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:

.sidenav {
    transition: 0s; 
}

#main {
    transition: margin-left 0s;
}

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.