Come fissare in alto i menù di Blogger allo scorrere della pagina.

Come rendere flottante un qualsiasi Menù di Blogger come quello delle Pagine Statiche in modo che rimanga sempre ancorato nella parte alta quando si scorre la pagina verso il basso.

Nel precedente articolo abbiamo visto una versione fluttuante di un Menù Responsive per Blogger. Come ho già spiegato in quel post fissare in alto un menù orizzontale semplicemente con i CSS è impresa non da poco.

Si può però risolvere usando il javascript insieme alla libreria esterna jQuery che permette di ancorare alla parte alta della pagina molte versioni di menù come per esempio il Menù Multilivello con casella di ricerca o il classico menù delle Pagine Statiche di Blogger.

In questo articolo mostrerò un procedimento generale per rendere flottanti i menù di Blogger per poi adattarlo ai due casi particolari appena elencati.

INDIVIDUARE L'ID O LA CLASSE PRINCIPALE DEL MENÙ

Prima di procedere occorre individuare l'ID o la classe del menù. Prendiamo come esempio il già citato Menù Multilivello. Gli elementi del menù hanno il loro ID e noi dobbiamo individuare quello principale cioè quello in cui vengono inserite le informazioni per la larghezza complessiva, per il colore di sfondo, ecc. Solitamente l'ID principale è quello che si visualizza nella prima riga 

Dallo screenshot del codice si deduce che l'ID del Menù Multilivello è #menuMultilevel. Talvolta invece di un ID il menù ha una classe con un punto al posto del cancelletto.

COME ANCORARE IN ALTO IL MENÙ DI BLOGGER

Dopo aver individuato l'ID principale del menù che deve essere già stato installato su Blogger, si salva il template per un eventuale ripristino e si va su Modello -> Modifica HTML. Con Ctrl+F si cerca la riga </head> quindi, subito sopra si incolla questo codice 

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
$(function() {
var $flotarMenu = $("IDMENU"),
$window = $(window),
offset = $flotarMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarMenu.css({'position' : 'fixed', 'width' : '100%', 'top' : '0px'});
} else {
$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
}
});
});
//]]>
</script>
<style>
IDMENU{
width:100%;
z-index: 9999;
}
</style>

Si salva il modello. Al posto di IDMENU si mette l'ID del menù (o la classe principale) che abbiamo ricavato dal suo codice. Per il menù multilivello preso come test l'ID è come visto #menuMultilevel. Altra personalizzazione importante è quella della larghezza scelta in 100%. Se nel nostro modello l'aspetto con 100% di larghezza potrebbe non andare bene si può sostituire con un valore assoluto invece che percentuale per esempio con 1100px in entrambe le occorrenze.

Come vedete nello screenshot precedente il menù rimane nella parte alta della pagina anche quando si scorre verso il basso. Per un miglior risultato nel caso specifico ho sostituito 100% con 930px. Ricordo che le due righe evidenziate di giallo sono l'ultima versione di jQuery e che possono essere tralasciate se tale libreria fosse già presente nel template.

COME RENDERE FLUTTUANTE IL MENÙ DELLE PAGINE STATICHE

Il menù delle Pagine Statiche di Blogger ha un ID che è #PageList1 quindi si può sostituire a IDMENU nel codice precedente per ottenere un risultato come il seguente

con il menù sempre visibile allo scorrere della pagina. In sostanza il codice diventa

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
$(function() {
var $flotarMenu = $("#PageList1"),
$window = $(window),
offset = $flotarMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarMenu.css({'position' : 'fixed', 'width' : '100%', 'top' : '0px'});
} else {
$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
}
});
});
//]]>
</script>
<style>
#PageList1 {
width:100%;
z-index: 9999;
}
</style>

e anche in questo caso si può passare da una larghezza percentuale a una assoluta in pixel. Concludo aggiungendo che si può anche inserire una riga del tipo background:#fff; sotto a #PageList1 { per personalizzare il colore di sfondo quando si scorre la pagina. Si può anche aggiungere una immagine di sfondo in questo modo background: url(URL_IMMAGINE) repeat scroll 0px 0px #fff; .