Convertir lista en boton desplegable sólo en móvile

[fede5426]

Son varias cosas las que hay que hacer..

En primer lugar, agregar un botón que solo sera visible en dispositivos moviles.
En segundo lugar, hacer unos cuantos cambios al diseño de la lista:

Si antes estaba asi:

Código CSS:

.boton{
    display:none;
}
 
nav{
    width:100%;     
    border-bottom:1px solid #354f64;
}
 
nav ul{
    width:100%;
    margin:0;
    background-color:#f3f3f3;
}
 
nav ul li{
    display:inline-block;
}
 

Ahora debería estar algo asi:

Código CSS:

@media screen and (max-width:480px){
 
   .boton{
        display:block;
        border-radius:5px;
        width:35px;
        cursor:pointer;
    }
 
   nav{
        position:relative;
    }
    
    nav ul{
        width:75%;
        position:absolute;
        top:100%;
        left:-100%;
        padding:0;
    }
    
    nav ul li{
        display:block;
    }
}
 

Con estos cambios logras que el menú se convierta en una lista vertical, que aparezca "flotando" (por la posición absoluta) debajo del nav (donde va a estar solo el botón) y que esté oculto a la izquierda (con left: -100%).

Y en tercer y último lugar, darle funcionalidad al boton con Javascript, o Jquery como lo hice en mi ejemplo:

Código Javascript:

$(document).ready(function(){
 
var contador = 1;
 
$('.boton').click(function(){
            if(contador == 1){
                $('nav ul').animate({"left" : "0"});
                contador = 0;
            }
            else{
                contador = 1;
                $('nav ul').animate({"left" : "-100%"});
            }
        });
 
});
 

Demo

Claro, todo esto agregando los estilos que creas necesarios en tu menú.. en la demo están agregados como para que quede más presentable

Saludos