Cómo crear un menú lateral con slide para diseños responsive

En este tutorial, crearemos un menú de navegación lateral expandible con Javascript y CSS. El resultado final será algo similar como el gif que aparece a continuación.

El diseño

Para empezar, vamos a comenzar con el diseño de nuestro menú lateral:

<div id="sideNavigation" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</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>

Como puedes observar, hemos creado nuestro menú de navegación lateral en un div cuya clase es sidenav. A continuación, he añadido la barra superior de navegación mediante el tag <nav> y he utilizado un SVG para el icono que será el encargado de abrir y cerrar el menú. Para ello, hacemos uso del atributo onclick, para que lleve a cabo la tarea de abrir y cerrar el menú mediante una función de Javascript que detallaremos después.

Recuerda poner todo el contenido de la web dentro del contenedor div id=”main” para que, cuando se abra el menú, se deslice a la derecha.

Javascript

Después, crearemos las funciones de Javascript encargadas de abrir y cerrar el menú. Estas dos funciones serán openNav, para abrir el menú, y closeNav, para cerrarlo.

<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, personalizamos nuestra página con algo de CSS para el menú lateral y para 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;
    }
  }
}

Ojo, es obligatorio utilizar body {overflow-x: hidden;} para asegurarnos que no aparezca el típico scroll lateral cuando añades esto en el CSS de tu proyecto.

Ahora solo queda que pruebes este menú en la parte pública de tu web y que revises que funciona satisfactoriamente.

Utilizando jQuery

Si quieres crear este menú lateral mediante jQuery, puedes hacerlo reemplazando el Javascript que puedes ver en la anterior sección con el siguiente código:

$('.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 slide

Para hacer que el menú aparezca sin la animación del slide, simplemente tienes que modificar la propiedad de CSS transition, tal y como te muestro a continuación:

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

Esto hará que el menú aparezca instantáneamente, ya que no hay delay en la transición. El valor por defecto utilizado es de 0.5.

Fuente: Tom Whitbread

Guardar

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP