Supporto volontario e collaborativo per Joomla!® in italiano

Bloccare il main menu in alto allo scroll della pagina

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Afixed top barvrete sicuramente notato che in alcuni siti web è presente un effetto particolare che riguarda la barra del menu principale.
L’effetto è il seguente: quando l’utente fa scorrere la pagina verso l'alto per vedere il contenuto, la barra del menu comincia a scorrere anch’essa verso l’alto, ma poi magicamente si blocca quando raggiunge il bordo superiore della finestra del browser, rimanendo poi sempre fissa e visibile fino alla fine dello scorrimento. Quando poi l’utente fa scorrere la pagina al contrario tornando verso l’alto, ecco che ad un certo punto il menu riprende la sua posizione iniziale.


Le immagini qui sotto spiegano meglio l’effetto.


main menu
Menu in posizione normale



main menu fixed top
menu bloccato in alto durante lo scroll

Se volete vedere un esempio il sito Joomla.it, cioè questo in cui siete adesso, ha proprio questo tipo di menù.
L'effetto di bloccare il menu principale sul lato superiore della finestra del browser è molto comodo per il visitatore del sito, che si trova il menù sempre visibile e non ha bisogno di scrollare sempre verso l'alto per ritrovarlo. Viene quindi adottato in molti siti proprio per questo motivo ed è noto con il nome di affix menu oppure sticky menu, anche se per sticky menu si dovrebbe intendere il menu sempre fisso in alto.
Vediamo come è possibile ottenere questo effetto nei template fatti con il T3-Framework.
Esaminiamo il template t3_bs3_blank, che è il template di esempio realizzato con la versione 3 del framework Bootstrap.
N.B.
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à.
1) La prima modifica da fare riguarda il file mainnav.php, che potete trovare nella cartella del template in questo percorso: templates/t3_bs3_blank/tpls/blocks/mainnav.php
Apritelo con il vostro editore preferito.
Alla riga 12 trovate questo snippet di codice:

<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">


sostituitelo con questo:

<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav" data-spy="affix" data-offset-top="100">


In pratica avete aggiunto questo codice:

data-spy="affix" data-offset-top="100"

cioè l'attributo data-spy=”affix” e l'indicazione dell'offset dal margine superiore data-offset-top="100" , che sta ad indicare dopo quanti pixel di scorrimento verso l'alto della pagina il menù deve bloccarsi. Questo valore non è sempre lo stesso per tutti i menu, perché dipende dalla distanza che ha il menù dal margine superiore della pagina. Provate a cambiare questo valore ed a fare dei test per impostare il valore che va bene per il vostro menù.

2) La seconda modifica riguarda invece il foglio di stile navbarl.less, che trovate in template/t3_bs3_blank/less/navbar.less.
Apritelo, cercate la riga 288 e troverete la classe .t3-mainnav

.t3-mainnav {
    border-left: 0;
  border-right: 0;
  margin-bottom: 0;
  border-radius: 0;

modificatela in questo modo:

.t3-mainnav {
    border-left: 0;
  border-right: 0;
  margin-bottom: 0;
  border-radius: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;

Salvate e chiudete.

A questo punto il gioco è fatto. Verificate che nella vostra pagina l'effetto funzioni e che il menù, dopo un breve scorrimento, si blocchi sulla parte superiore della pagina e rimanga sempre fisso durante lo scorrimento verso il basso. Quando poi si ritorna su scrollando la pagina in senso inverso, dopo un po' il menù ritornerà nella posizione iniziale.


Buon lavoro!

commentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.7.2 Stabile Italiana
Data di rilascio: 23 Maggio 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: