Menù responsive collapsible che si apre al refresh della pagina per poi chiudersi

[pincopallinino]

Buongiorno
Perdonate la mia ignoranza ma non conosco javascript
Ho utilizzato, per fare il menù responsive, le istruzioni di un vostro tutorial

jQuery(function () {
var collapsed = true;
jQuery('nav#nav1 >h4').click(function () {
collapsed = !collapsed;
formatSidebar();
});
jQuery(window).resize(formatSidebar);
formatSidebar();


function formatSidebar() {
if (jQuery(window).width() > 750) {
jQuery('nav#nav1').removeClass('collapsible');
jQuery('nav#nav1 ul#menu-principale').show();
jQuery('nav#nav1 ul#menu-settori-up').hide();
} else {
jQuery('nav#nav1').addClass('collapsible');
if (collapsed) {
jQuery('nav#nav1 ul#menu-principale').hide();
jQuery('nav#nav1 ul#menu-settori-up').hide();
jQuery('nav#nav1 > h4').removeClass('minus');
} else {
jQuery('nav#nav1 ul#menu-principale').show();
jQuery('nav#nav1 ul#menu-settori-up').show();
jQuery('nav#nav1 > h4').addClass('minus');
}
}
};
});
</script>

Il problema è che quando sono nella versione cellulare cioè col menù nascosto e faccio un refresh della pagina, esso si espande per poi richiudersi subito. E questo comportamento lo fa anche all'apertura della pagina quindi alla load
Come posso far sì che questo non avvenga? E che nella versione mobile il menù rimanga chiuso sia alla load che al refresh?

Grazie infinite per l'aiuto

[KillerWorm]

Salve, dal solo script che hai postato non si capisce quale potrebbe essere la causa del problema; sarebbe utile che tu indicassi il link del tutorial in questione e, se possibile, anche il link della tua pagina in cui riscontri il problema, o tuttalpiù il relativo codice HTML a cui è applicato questo script e l'eventuale CSS.




PS: occhio, quando si posta del codice sul forum è opportuno racchiuderlo tra gli appositi tag [code]...[/code] (vedi il regolamento di questa sezione tra le discussione in evidenza).

[pincopallinino]

Scusate se faccio errori. Non sono pratica del forum.
il tutorial è questo
http://www.html.it/pag/33423/stili-p...a-navigazione/
e l'esempio è
http://www.html.it/guide/img/respons...gio/index.html
anche qui se restringiamo il browser fino alla versione più piccola o lo visualizziamo su un cellulare notiamo che è al refresh della pagina il menù si allarga per poi restringersi.
Ovviamente, se la connessione non è velocissima, questo fenomeno si evidenzia ancora di più ad esempio su cellulare se non è connesso a wifi.
Io purtroppo non conosco la programmazione javascript per cui non so come apportare modifiche al codice di questo esempio.
Nel caso aveste altri esempi completi e funzionanti da utilizzare posso usare quelli ma, purtroppo, avrei bisogno di esempi completi perché non li so completare ;-) chiedo perdono umilmente per la mia "asinità" ;-)

[KillerWorm]

Bene, sul mio pc intravedo il problema ma è talmente veloce che quasi non riesco a notarlo. Come tu hai indicato, è relativo alla velocità di connessione o, meglio, al tempo di caricamento dalla pagina stessa.

Ti anticipo che si potrebbe risolvere con l'apporto di qualche regola CSS.

Perché avviene quel problema è presto detto. Il sistema che stai adoperando agisce solo tramite JavaScript per collassare il menu. Quello script viene però eseguito solo quando la pagina risulta pronta, cioè quando gli stessi elementi HTML sono stati letti dal browser e appiccicati sulla pagina (quindi risultano anche già renderizzati, visibili sulla pagina); perché solo da quel momento possono essere manipolati via JavaScript.

La funzione principale di jQuery (che è una libreria JavaScript) si occupa appunto di intercettare l'evento in cui la pagina risulta pronta per la manipolazione via script (tecnicamente chiamato evento ready()).

Nel tuo script è definito con la prima riga:

jQuery(function () { .... })

In linea di massima questo procedimento è normalmente obbligatorio. Se la pagina però risulta lenta nel caricamento, per la presenza di molti contenuti o per la bassa velocità di connessione o per qualsiasi altro motivo, potrebbe verificarsi appunto questo tipo di problemi.

A differenza di JavaScript, il CSS invece viene definito generalmente in modo preventivo, per cui le regole (in linea di massima) sono lette dal browser prima che avvenga il rendering. Quindi, nel momento in cui gli elementi vengono visualizzati sulla pagina, risulteranno già "formattati" secondo il CSS a loro applicato.

Ora, col CSS si tratta semplicemente di impostare un breakpoint per applicare (preventivamente) il display:none per quell'elemento quando la pagina risulta aperta in modalità mobile. Ovviamente non entro nei dettagli dell'argomento che probabilmente hai già affrontato con quella stessa guida (vedi il capitolo 4).

Nel tuo CSS principale puoi aggiungere una regola del genere:

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

Questo farà in modo che il menu risulti "inizialmente" chiuso quando la larghezza della finestra è massimo 750px. Ovviamente lo script si occuperà poi delle altre interazioni per aprire/chiudere il menu. Le regole applicate via JavaScript (pur essendo sempre regole CSS) sono definite come stile in linea, per cui avranno normalmente priorità rispetto al CSS principale (incluso nella pagina).

Vedi se così si risolve, fai sapere.
Buon proseguimento.

[pincopallinino]

Innanzi tutto scusa per la risposta tarda ma ho avuto delle urgenze lavorative che mi hanno portato a poter mettere la testa solo oggi su questo progetto.
Ti ringrazio infinitamente per la chiarezza con cui hai spiegato le varie questioni. L'impegno e la voglia di voler far capire è una cosa che si trova di rado e quindi davvero grazie!!
Hai fatto un quadro della situazione che mi ha permesso di unire alcuni fili pendenti e la tua soluzione funziona!

[ciro78]

PS: occhio, quando si posta del codice sul forum è opportuno racchiuderlo tra gli appositi tag [code]...[/code] (vedi il regolamento di questa sezione tra le discussione in evidenza).

infatti...teniamolo sempre a mente

grazie