Problema ridimensionamento finestra responsive

[Andry695]

Spero di essere nella sezione giusta per il mio problema, in caso contrario mi scuso. Sto creando un sito responsive in modo che questo si possa adattare ad ogni dispositivo. Ho deciso che per i dispositivi mobile il menu venga nascosto e per renderlo visibile è necessario premere un tasto menu (simile al sito mobile di facebook per intenderci). Fino a qui ok. Poi se aumento le dimensioni del browser (da mobile a desktop) il menu viene mostrato sfasato, e per fare in modo che si veda bene devo ricaricare la pagina. Come posso rimediare a questo problema? Allego degli screenshoot per farvi capire meglio. Grazie in anticipo.
Desktop:Schermata del 2014-07-13 17:19:51.jpg
Mobile:Schermata del 2014-07-13 17:20:05.jpg
Desktop dopo essere passato per la modalità mobile:Schermata del 2014-07-13 17:20:10.jpg

[Prill]

è necessario vedere il codice (meglio direttamente in funzione)

[Andry695]

Questo è il codice del file css contenente le istruzioni per il responsive:

@media screen and (max-width: 1120px) {
html {
    padding: 0;
}
header{
    border-radius: 0;
}
section{
    border-radius: 0;
}
aside{
    border-radius: 0;
}
}

@media screen and (max-width: 860px) {
nav ul li{
    width: 16.66%;
    float: left;
}
nav ul li#destra {
    width: 50%;
    float: left;
}
nav {
    height: 100px;
}
aside {
    display: none;
}
section {
    width: 100%;
}
}

@media screen and (max-width: 712px) {
section {
}
header {
    display: none;
}
nav ul {
    width: 0;
    background: #aaaaaa;
    height: auto;
    padding, margin: 0;
    color: blue;
    float: left;
    margin-top: 50px;
    overflow: hidden;
    transition: all 300ms linear;
}
nav ul li, nav ul li#destra{
    display: block;
    //clear: both;
    float: none;
    width: 100%;
    border-bottom: none;
    border-left: 5px solid;
}
nav ul li a {
    text-align: left;
}
nav {
    height: 50px;
    z-index: 0;
    float: none;
}
a#menu {
    display: inline-block;
    line-height: 50px;
}
}

Mentre questo è il codice in javascript per fare in modo che nella versione mobile ci sia il menu nascosto:

jQuery(document).ready(function() {
    var show = 0;
    $('#menu').click(function() {
        if(show == 0) {
            $('nav ul').css({width: '50%'});
            show = 1;
        }else {
            $('nav ul').css({width: '0'});            
            show = 0;
        }
    });
});

Ho letto su alcuni siti che c'è un comando in javascript per risolvere questo problema ma non ho capito un granché.

[Prill]

è necessario il codice completo. Hai una pagina online? Oppure da dove hai ripreso il menu? (in questo caso: nella versione originale funzionava correttamente?)