Crear un menú responsivo con SlickNav

SlickNav es un plugin de jQuery que nos permite crear un menú responsivo de forma fácil y sin complicaciones. Para utilizarlo debemos hacer lo siguiente:

1.- Nos descargamos el plugin desde la web de SlickNav y descomprimimos el fichero en la raíz de nuestro directorio web (o en cualquier subdirectorio).

2.- Vamos a la cabecera de nuestra web y entre <head> y </head> insertamos lo siguiente (suponiendo que lo hayamos descomprimido en la raíz del directorio web):

-Añadimos el fichero javascript:

<script type="text/javascript" src="SlickNav-master/jquery.slicknav.js">
</script>

-Añadimos el fichero css:

<link rel="stylesheet" href="SlickNav-master/slicknav.css" />

-Inicializamos el menú, para este ejemplo se está usando un menú con id “menu_principal”:

<script type="text/javascript">
  $(function(){
    $('#menu_principal').slicknav();
  });
</script>

3.- Ya tenemos el menú responsivo funcionando, ahora tenemos que ocultarlo para que solo se muestre en dispositivos móviles:

.slicknav_menu {
  display:none;
}

4.- El anterior código css nos lo ocultará para todas las resoluciones, por lo que usando media queries debemos mostrarlo solamente para dispositivos móviles:

@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
  .slicknav_menu {
    display: block;
  }
}

Podéis ver un ejemplo de su funcionamiento en esta misma web si la cargáis desde un dispositivo móvil. Si a la hora de implementarlo no os funciona a la primera es posible que necesitéis actualizar vuestra versión de jQuery, ya que la mínima soportada es la 1.7.

slicknav

banner