Bloccare il main menu in alto allo scroll della pagina

[virtual]

Ciao a tutti, ecco un articolo che spiega come bloccare il main menu sul borso superiore del sito quando la pagina scorre verso il basso.
buona lettura!
link all'articolo: http://www.joomla.it/e-ancora/articoli-community-3x/8298-bloccare-il-main-menu-in-alto-allo-scroll-della-pagina.html

[Ago_]

Se il vostro template non è fatto con il T3 Framework, dovrete assicurarvi che carichi comunque il framework Bootstrap v.3, altrimenti l'effetto del menu non funzionerà.

io monto template "yootheme", vuol dire che devo installare il T3 ?? pensate che possa essere compatibile ??

[virtual]

ciao,
no, non devi installare il t3, devi solo assicurarti che il template carichi il framework Bootstrap 3, non so se i temi di yootheme usano questo framework.

[Ago_]

ciao,
no, non devi installare il t3, devi solo assicurarti che il template carichi il framework Bootstrap 3, non so se i temi di yootheme usano questo framework.

non penso, in questo caso posso installarlo o non c'è soluzione ??

[virtual]

puoi caricarlo tu via ftp in una cartella del template e poi richiamarlo dalla index del template. Non è nemmeno obbligatorio includere tutto il framework, puoi scaricare solo la classe affix, che è l'unica che viene usata. Dal sito di bootstrap è possibile scegliere le classi da inserire nel framework: customize bootstrap

[giusep]

Complimenti e grazie per l'istruttivo articolo.
Un appunto:
non sarebbe più semplice mettere nel css del template POSITION:FIXED?

[vvfv.mortara]

Ciao ottimo articolo e grazie.


Uso esattamente il template da te utilizzato nell'articolo e ho provato a fare la modifica.


Vorrei segnalare che, nel mio caso, per far funzionare la modifica ho dovuto utilizzare la compilazione da less a css presente nel menu del template, ovviamente collegandomi come amministratore.


Grazie ancora per la dritta.


Ciao


Lorenzo

[virtual]

Ciao,
sì, hai ragione, me l'ero dimenticato di scriverlo nell'articolo, grazie per la segnalazione!
Infatti i file .less vengono usati solo nella modalità sviluppo, quando si passa alla modalità produzione bisogna prima aver compilato da less a css per vedere il risultato delle modifiche.

Ciao!

[virtual]

@giusep
non ho provato a mettere
position: fixed;

tu per caso l'hai fatto? Funziona anche così?

Ciao!

[giusep]

Si funziona
Ovviamente si deve impostare il z-index e regolare le distanze con altre tabelle.

[virtual]

Bene! quando si tratta di codice, non c'è mai un solo modo di fare le cose, ce ne sono sempre 3 o 4 

[giusep]

Riguardo il metodo da seguire è una cosa soggettiva, si deve tenere conto del template e, come hai evidenziato tu, dal framework

[vvfv.mortara]

Ciao, vorrei segnalare quanto segue:

se si naviga il sito con uno smartphone, il menu è normalmente nascosto e viene richiamato premendo il tasto a destra (quello con tre righe sottili, per intenderci)

se il menu è composto da più di 10/15 voci (dipende dalle dimensioni dello schermo dello smartphone) le ultime righe non si riescono più a visualizzare perché il menu non scorre più verso l'alto

Domanda: è possibile bloccare lo scroll del menu per dimensioni di schermo dove il menu viene presentato espanso e consentire lo scroll dove il menu viene nascosto e viene richiamato dal tasto a destra?

Spero di essere stato chiaro, grazie per le risposte/suggerimenti

Lorenzo

[Sitiwebjoomla.it]

Ottimo articolo. Anche noi usiamo spesso Yootheme, faccio dei test e aggiorno il post.

[virtual]

@vvfv.mortara

ciao, bisogna fare qualche test con delle media query per fare in modo che al di sotto di certe dimensioni di schermo l'effetto non abbia luogo. Se hai molte voci di menu forse è il caso che non lo usi.

[vvfv.mortara]

Ciao e grazie per la risposta.
Per ora infatti ho disattivato il blocco ma mi piacerebbe capire come intervenire sul codice per realizzare le due opzioni, cioè blocco con menu espanso e libero con menu compatto.
Tra l'altro ti segnalo che ho provato a navigare con uno smartphone il sito joomla.it e ho verificato che si comporta in due modi diversi a seconda che il menu sia espanso o compatto.
Grazie
Lorenzo

[vvfv.mortara]

Ciao,
per favore c'è qualcuno che può dare informazioni in merito alla modifica richiesta per fare in modo che il template T3 si comporti come quello del sito joomla.it?
Grazie
Ciao
Lorenzo

[virtual]

inserisci questo codice nel file navbar.less; quando la dimensione dello schermo diventa minore di 768 pixel, la barra del menu è libera di scorrere verso l'alto.

Codice: [Seleziona]

@media (max-width: 768px) { .affix { position: static; } }

[vvfv.mortara]

Fantastico grazie, funziona.


Ho aggiunto la riga in fondo al file navbar.less sotto la cartella less del template, poi però bisogna ricordarsi di entrare nel foglio di stile da usare e ricompilare il file da less a css.


Grazie mille sei stato veramente gentile.


Lorenzo

[virtual]