Crear un menú hamburguesa con slide mediante jQuery y CSS

Los menús hamburguesa con slide se han convertido en tendencia de diseño en el diselo web actual. Los menús con slides con muy flexibles y funcionales, y cuentan con muchísimas ventajas como el ahorro de espacio, reordena la página y hace que el sitio web sea más legible haciendo más énfasis en el contenido. No sois pocos los que nos habéis solicitado un tutorial para desarrollar este tipo de menús puesto que son muy comunes en las webs modernas. Por lo tanto, en este tutorial veremos cómo crear un menú hamburguesa con slide mediante jQuery y CSS. Abordaremos el tutorial en sencillos pasos para que se entienda todo mucho mejor.

Esta será la estructura de ficheros que seguiremos en este tutorial:

  • index.php
  • style.css
  • slide.js

Crear el HTML del menú de navegación con slide

Antes que nada, en el fichero index.php crearemos nuestro menú de navegación con slide.

<div id='slide_nav'>
<p id="slide_nav_button">☰</p>
</div>
<ul id='slide_menu'>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Advertise</a></li>
</ul>

Personalizando nuestro menú hamburguesa con slide

Después, en el style.css añadiremos algo de estilo a nuestro menú.

body {
margin:0px auto;
padding:0px;
}
#slide_nav {
background-color:black;
width:100%;
height:60px;
line-height:60px;
color:white;
font-family:helvetica;
font-size:25px;
padding-left:10px;
box-sizing:border-box;
}
#slide_nav_button {
width:90px;
cursor:pointer;
}
ul {
display:none;
padding:0px;
margin:0px;
width:200px;
height:90%;
background-color:#2E2E2E;
position:absolute;
box-shadow:inset 0px 0px 50px 0px #6E6E6E;
}
#slide_menu li {
border-bottom:1px solid #424242;
}
#slide_menu li:hover {
width:201px;
background-color:#2E2E2E;
box-shadow:inset 0px 0px 50px 0px #848484;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
#slide_menu li a {
height:50px;
line-height:50px;
display:block;
color:silver;
text-decoration:none;
font-size:18px;
font-family: helvetica;
padding-left:10px;
}
#slide_menu li:hover a {
padding-left:25px;
color:white;
-webkit-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
#page_content {
margin-top:40px;
text-align:center;
font-family: helvetica;
}

Hacer que nuestro menú se desplace

Finalmente, en el archivo slide.js, haremos que nuestro menú cuente con la función de desplazarse hacia dentro y hacia afuera cuando cliquemos en el botón. Para ello nos ayudaremos de la función de jQuery animate().

$(document).ready(function(){
$("#slide_nav_button").click(function(){
$('#slide_menu').animate({width:'toggle'},300);
});
});

COMPARTE ESTE ARTÍCULO

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