Pubblicato il 20/01/17 - aggiornato il  | 14 commenti :

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 

id-menu-blogger

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.

menù-fluttuante-blogger

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

menù-pagine-statiche

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; .




14 commenti :

  1. Posso ringraziarti davvero tanto? Spero che aiuterà anche molti altri!

    RispondiElimina
  2. A proposito, se volessi inserire questo codice per rendere flottanti due diversi menu nel mio tema, come dovrei fare? Perché ne accetta soltanto uno

    RispondiElimina
  3. Nel secondo codice cancella le due righe jQuery e sostituisci flotarMenu con flotarMenu1 in tutte le sue occorrenze
    @#

    RispondiElimina
    Risposte
    1. Devo cambiarli tutti aggiungendo 1? Perché non va :/

      Elimina
    2. Ci sono quattro flotarMenu, sostituendoli con flotarMenu1 dovrebbe funzionare con due menù se questi sono uno per il mobile e uno per il desktop. Se sono tutti e due per la stessa versione non funzionerà perché dovrebbero andare tutti e due nella stessa posizione
      @#

      Elimina
    3. Niente da fare...
      Sì, sono due menu diversi, uno solo per il mobile, l'altro solo per il desktop.
      Quello per il computer ho visto tra l'altro che ha il tuo nome, ti lascio lo screen: https://68.media.tumblr.com/4644d29c58926aa5b3984084e2220230/tumblr_ok403kWks21rzjd9to1_540.png

      Elimina
    4. Credo sia questo menù qui
      http://www.ideepercomputeredinternet.com/2013/04/menu-orizzontale-blogger.html
      e funziona di sicuro. Come ho indicato anche nel post il sistema funziona su quasi tutti i menù
      @#

      Elimina
    5. Esattamente, è proprio quello lì.
      Sì, ma difatti provando il codice singolarmente va, ho provato.
      Invece con due codici no, anche inserendo il flotarmenu1

      Elimina
  4. Nel secondo codice però non hai sostituito le occorrenze di flotarMenu con flotarMenu1
    @#

    RispondiElimina
    Risposte
    1. Tu hai provato a farlo? Secondo me vanno in contrasto, l'altro menu per il mobile è questo: http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      E ho usato questo codice per metterli separati:

      Codice dell'elemento visibile con il mobile


      Codice dell'elemento visibile tramite desktop

      Elimina
    2. Ho provato anche con un altro sito per capire se fosse il mio tema o fosse troppo modificato e ha lo stesso problema. :/

      Elimina
    3. Allora procedi in altro modo. Crea due codici per i due menù con i rispettivi ID quindi inserisci i tag condizionali per abilitarli solo per il mobile o per il desktop con questa sintassi

      <b:if cond='data:blog.isMobile'>
      Codice per il menù del mobile
      </b:if>
      <b:if cond='!data:blog.isMobile'>
      Codice per il menù del desktop
      </b:if>

      @#

      Elimina
    4. Sì, è il codice che ti avevo incollato sopra, solo che non è apparso.
      Ancora nulla.

      Elimina
    5. Questo commento è stato eliminato dall'autore.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.