Menu Mobile: espansione e compressione: javascript, jquery, html, css, responsive-design

Ho creato un menu mobile reattivo usandojQuery. Tutto funziona bene tranne la commutazione del menu. Di default il menu è espanso. Voglio che il menu venga collassato per impostazione predefinita e quando si fa clic sul menu delle parole, si espande e quindi è in grado di espandersi e comprimere sulla selezione. L'unico punto di considerazione in questo è che c'è anche un normale menu di navigazione, che viene visualizzato e il layout in modo diverso. Vorrei che questo menu fosse sempre attivo. Voglio solo che il menu mobile sia nascosto (collassato) per impostazione predefinita e che venga espanso quando viene fatto clic.

Ho caricato il progetto su jsfiddle: linkhttp://jsfiddle.net/qdhg0r9d/

Grazie

risposte:

Basta aggiungere

@media screen and (max-width: 600px) {
#collapse-menu{
display:none;
}
}

Per il tuo CSS questo lo nasconderà di default quando la larghezza dello schermo è inferiore a 600px, quindi quando fai clic sull'interruttore jQuery lo farà cavalcare per te aggiungendo lo stile in linea display:block; e visualizzalo di nuovo

$(document).ready(function () {
if($(window).width() <= 640){
$("#collapse-menu").toggle();
$("#pull").on("click",function () {
$("#collapse-menu").toggle();
});
}
});

funziona solo in base alla larghezza dello schermo