Come rendere flottante il menù orizzontale delle Pagine Statiche di Blogger.

Come visualizzare sempre in primo piano il menù orizzontale delle Pagine Statiche di Blogger utilizzando JQuery.

Nel CMS Blogger si può creare un menù orizzontale in modo naturale pubblicando una serie di pagine statiche i cui titoli  insieme alla Home andranno a formare un menù orizzontale. Dopo averle pubblicate si va su Layout > Aggiungi un gadget > Pagine e si configura il widget scegliendo le pagine da visualizzare tra quelle pubblicate e eventualmente modificandone l'ordine. 

Agli elementi creati automaticamente con le pagine si possono aggiungere anche dei link esterni al blog come potrebbero essere per esempio gli URL della pagina Facebook, dell'account Twitter o Google+. Seguendo la falsariga del post su come rendere flottante un widget di Blogger ma utilizzando JQuery ecco come si può fare per avere il menù orizzontale delle Pagine di Blogger sempre al top della pagina anche quando questa viene scrollata verso il basso.

L'hack funziona anche se il menù fosse formato da due righe di elementi come nello screenshot

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra a questa si incolla il seguente codice

<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' : '880px', 'top' : '0px'});
} else {
$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
}
});
});
//]]>
</script>
<style>
#PageList1 {
width:880px; /* Larghezza del widget */
background:#fff; /* Colore di sfondo del widget */
z-index: 9999;
}
</style>

Si salva il modello. Nel codice è stato considerato che il menù abbia come ID del widget #PageList1 che è normale quando si abbia un solo menù delle Pagine. Si può settare anche la larghezza del menù è il colore dello sfondo. La riga evidenziata di giallo è la libreria JQuery e può essere tralasciata se fosse già presente nel template.  Questo codice funziona nei Modelli Semplice e in altri template. 

Se si usa il modello Fantastico (Awesome) il menù prende tutta la larghezza del layout e allora dobbiamo utilizzare un codice diverso incollato nello stesso punto del precedente

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
$(function() {
var $flotarMenu = $(".tabs-outer"),
$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>
.tabs-outer {
width:100%;
background: url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_groovy.png) repeat scroll 0px 0px #000; /* Colore dello sfondo */
z-index: 9999;
}
</style>

dove al posto dell'ID del widget è stata utilizzata la classe .tabs-outer. Anche in questo caso può essere settato il colore di sfondo mentre viene utilizzata per lo stesso una immagine dello stesso modello. Con questa personalizzazione i lettori del vostro blog avranno sempre in primo piano il menù delle Pagine per poter accedere più facilmente a tutti i vostri contenuti.

Fonte | Ciudad Blogger -