Pubblicato il 26/06/13e aggiornato il

Menù orizzontale su più livelli per Blogger

Come installare un menù multilivello con casella di ricerca ma senza javascript in un blog di Blogger.
La realizzazione di un menù è una delle cose di maggior impegno per un webmaster visto che bisogna scegliere la qualità e la quantità di voci da mostrare, l'aspetto e la tipologia del menù, testare come si visualizza con i vari browser e non ultimo inserire tutte le voci e gli indirizzi relativi.

Gli articoli che ho dedicato ai menù non sono tra i più visti ma sicuramente tra i più commentati e quelli che risultano avere una permanenza più elevata dei visitatori. Il menù che vado a presentare funziona correttamente con Firefox, Chrome, Safari, Opera e Internet Explorer 10. Ha qualche problema di visualizzazione con i browser IE  delle versioni precedenti.

Si tratta di un menù orizzontale pensato su più livelli che possono essere creati o eliminati a piacere in fase di personalizzazione. Alla fine delle voci del menù è stata introdotta anche una casella di ricerca per gli articoli del blog che funziona tramite l'inserimento di una keyword nel campo relativo e andando su Invio per trovare gli articoli che abbiano una corrispondenza con tale parola chiave.

menù-multilivello-casella di ricerca

Dopo aver salvato il template andate su Modello > Modifica HTML e cercate la riga di codice ]]></b:skin> quindi, subito sopra, incollate questo blocco di CSS
Salvate il modello. Sempre su Modello > Modifica HTML selezionate Vai al widget > Header1

vai-al-widget-header1

e scorrete il codice fino a che non trovate la fine della intestazione

intestazione-blog

Il codice dell'Header terminerà con uno o due </div> e sarà seguito da un <div class='…> . Subito dopo la fine del codice della Intestazione si incolla quello che sarà il codice del nostro menù

PERSONALIZZAZIONI DEI CSS

Nel codice dei fogli di stile sono stati colorati di rosso i parametri più importanti da modificare e accanto sono stati inseriti dei commenti colorati di verde per indicare a cosa si riferiscono. Possiamo scegliere la larghezza del menù in percentuale o in pixel, il raggio di curvatura dell'arrotondamento, il colore dello sfondo delle voci con o senza l'effetto del mouse, il colore del testo con o senza mouse, il colore di sfondo del menù e quello dei sottomenù se puntati o meno dal cursore e la larghezza dei sottomenù. I più esperti potranno ovviamente modificare anche tutti gli altri parametri. Ai neofiti ricordo che ho pubblicato un post sui codici dei colori che potrebbe tornarli utile.

PERSONALIZZAZIONE DELLE VOCI DEL MENU

Per aggiungere una nuova voce principale, prima di <!-- Casella di Ricerca Inizio -->, incollate

<li class="top"><a href='Link_URL' class="top_link"><span>Voce X</span></a></li>


Se invece volete inserire una voce insieme a dei sottomenù il codice è il seguente

<li class='top'><a href='#' class='top_link'><span class='down'>Voce X</span></a>
<ul class='sub'>
<li><a href='Link_URL'>Voce X.1</a></li>
<li><a href='Link_URL'>Voce X.2</a></li>
<li><a href='Link_URL'>Voce X.3</a></li>
</ul>
</li>

Se poi vi serve creare un altro sottomenù per esempio della Voce X.1, al posto della riga colorata di viola inserite quest'altro codice

<li><a href='#' class='fly'>Voce X.1</a><ul>
<li><a href='Link_URL'>Voce X.1.1</a></li>
<li><a href='Link_URL'>Voce X.1.2</a></li>
<li><a href='Link_URL'>Voce X.1.3</a></li>
</ul>
</li>


ELIMINAZIONE DELLA CASELLA DI RICERCA

Coloro che non vogliono visualizzare la casella di ricerca possono eliminarla cancellando tutto il codice dei CSS posizionato dopo la riga /* CSS della casella di ricerca */ e tutto il codice del menù che va da <!-- Casella di Ricerca Inizio --> fino a <!-- Casella di Ricerca Fine --> righe in verde comprese.


Ricordo che se non visualizzate bene il menù sul vostro blog con Internet Explorer o con Chrome si può sempre inserire nel template un codice di compatibilità con questi browser per vederlo correttamente. Se non avete la riga indicata nel post linkato perché state usando un template scaricato da internet basta che dopo <head> incolliate questa riga di codice

<meta content='IE=8, IE=9, IE=10, chrome=1' http-equiv='X-UA-Compatible' />


Una particolarità importante di questo menù è che non usa javascript ma solo CSS e quindi per questa ragione ha una velocità di caricamento molto più alta dei menù simili ma con javascript. Concludo osservando che il menù invece di essere posizionato sotto l'Intestazione può benissimo essere inserito dopo la Navbar e prima dell'Header andando su Vai al widget > Navbar1 e seguendo la stessa procedura che è stata appena illustrata. 




46 commenti :

  1. Ciao Ernesto. Questo menù mi è piaciuto molto, quindi ho deciso di metterlo, al posto del menù tradizionale di blogger. Ovviamente questo, a differenza di quello blogger, non è compatibile con la versione mobile, su cui risulta totalmente sballato.
    Avevo pensato di non far comparire il widget sulla versione mobile, ma essendo incorporato nell'intestazione, mi andrebbe via anche il logo. Nella tua demo però nella versione mobile non appare, pur essendoci l'intestazione. Come hai fatto?
    Se serve il mio blog è infoapplecomputer.blogspot.it

    RispondiElimina
    Risposte
    1. @# Ho semplicemente scelto il modello semplice su Modello > Cellulare. Ma anche Predefinito dovrebbe andare bene.

      Elimina
    2. 1) ah ok. Quindi se io volessi mantenere il mio modello per il mobile, non posso togliere questo menù?
      2) Che voce devo aggiungere al CSS per far sì che il menù venga semitrasparente (sempre se possibile)?
      3) se diminuisco la lunghezza della barra di ricerca, la barra mi viene "tagliata". Cioè da una parte stondata, mentre dalla parte destra tagliata di netto. Come risolvo? ho la necessità di accorciarla.

      Grazie mille

      Elimina
    3. @#
      1) In teoria si possono inserire due tag condizionali come illustrato nella seconda parte di questo post
      http://www.ideepercomputeredinternet.com/2013/01/blogger-mobile-modello.html
      <b:if cond="data:blog.isMobile">
      <!-- Visibile solo nei dispositivi mobili-->Codice di un elemento da visualizzare solo nel mobile al posto del menù
      <b:else/>
      <!-- Visibile solo tramite desktop -->Codice del menù
      </b:if>

      2) Leggi qui
      http://www.w3schools.com/css/css_image_transparency.asp
      o anche qui
      http://www.ideepercomputeredinternet.com/2012/11/trasparenza-effetto-immagini.html
      però non è cosa immediata

      3)La barra di ricerca ha una immagine di sfondo, questa
      https://lh3.googleusercontent.com/-Da_UMxywwnY/UcoYOhXiQbI/AAAAAAAAiWs/N89PODWYsIU/s1600/ricerca.png
      che è 228x22 pixel. Se vuoi accorciarla devi ridimensionare questa immagine nella sola larghezza lasciando invariata l'altezza

      Elimina
    4. Grazie mille Ernesto, molto efficiente come al solito... un'ultima domanda. Se faccio come hai proposto tu per la versione mobile, teoricamente potrei anche inserire un secondo menù: uno per il desktop e uno per il mobile; giusto?

      Elimina
    5. @# Sì è così. Però quei tag condizionali quando li ho testati non hanno funzionato per tutti i modelli. E' per questo che ho usato l'avverbio "teoricamente"

      Elimina
    6. Ancora una domanda Ernesto: Mi hai dato il codice per far apparire il menù nella versione desktop ed un altro elemento nella versione mobile. Se io invece nella versione mobile non volessi far apparire niente?

      Elimina
    7. Non conosco il tag che sia l'opposto di questo
      < b:if cond="data:blog.isMobile" >
      per mostrare cioè un elemento solo nella versione desktop. Se proprio non vuoi mettere nulla nel mobile prova a inserire una piccola immagine dello stesso colore dello sfondo o un testo con i font colorati come il background @#

      Elimina
    8. Ho risolto con questo codice:



      Codice del menù


      E poi ho inserito il widget delle pagine specificando Mobile='only'.

      Grazie mille ernesto per l'aiuto che mi hai dato e scusa per il tempo che ti ho fatto perdere ;)

      Elimina
    9. Non mi ha pubblicato il codice, comunque era quello che mi avevi suggerito te, lasciando vuota la parte del mobile e riempiendo solo l'else

      Elimina
  2. l'ho applicato al mio blog, era proprio quello che cercavo da tanto tempo... e poi con quella casella cerca incorporata rende il blog più professionale, sei il migliore!
    Grazie

    RispondiElimina
  3. Ciao, purtroppo questa sera ho provato ad installare questo meraviglioso menu, tutto stava procedendo come doveva fino a quando non è andata via la corrente e una volta riacceso il pc non ho capito più nulla. In pratica ho provato a rifare i procedimenti per arrivare all'installazione di questo menu ma quando vado nella voce "header 1" per eseguire il secondo passaggio ed incollare il CSS per menù multilivello, ma mi si sono sballati tutti i codici HELP PLEASE =(

    RispondiElimina
    Risposte
    1. Spero che tu prima di procedere abbia salvato una copia del modello (template) come consigliato nel post. In questo caso basta che tu lo ripristini e inizi di nuovo l'installazione
      @#

      Elimina
  4. L'ho fatto, ma purtroppo non mi va in nessun modo, non so, forse andando via la corrente improvvisamente non è andato tutto come previsto... in tal caso devo soltanto rifondare il blog, giusto? :/

    RispondiElimina
  5. Ti è andata via la corrente proprio mentre salvavi il file? Veramente sfortunata. Non credo perché non avresti potuto fare delle modifiche. Dovrebbe caricare e ripristinare il tutto. Se non ti ricordi dove è il file XML del modello è chiaro che dovrai caricare uno nuovo
    @#

    RispondiElimina
  6. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  7. P.s. risolto ed ora è fantastico! Grazie ancora!

    RispondiElimina
  8. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  9. Ciao! Seguo il tuo blog da un po' e trovo che tu sia davvero grandioso! Complimenti!
    Al contrario, però, io purtroppo non sono molto pratica con i blog >.<
    Tuttavia qualche giorno fa ho aperto un blog di cucina e non voglio rinunciarci! Ho inserito questo fantastico menu che mi è venuto benissimo (grazie alle tue istruzioni ovviamente) solo che ora vorrei sapere una cosa perché non mi è chiara.Cerco di spiegarmi quanto meglio possibile. Allora una delle voci sul mio menu dice "Speciali" cliccandoci su si apre una sottovoce "ricette festività" sulla quale cliccando si apre ancora un elenco, in cui ci sono tutte le festività scritte. Ora, nella parte "Epifania" (che si avvicina ormai) ho inserito una ricetta, ma vorrei inserire l'url di altre ricette sempre nella stessa categoria, come faccio? (Il che vale per il resto delle categorie che ho creato, come "torte", "antipasti" etc)


    Grazie.

    RispondiElimina
    Risposte
    1. La soluzione migliore è quella di linkare non l'URL del post con una ricetta "Epifania" ma l'URL della etichetta "Epifania" che inserirai in tutti i post che abbiano una relazione con questa festività. L'URL in questione dovrebbe essere di questo tipo
      http://nomeblog.blogspot.com/search/label/epifania
      Questa stessa operazione puoi farla ovviamente anche con le altre etichette
      @#

      Elimina
  10. Salve, vorrei un'informazione: per inserire questo tipo di menù su Tumblr, come si potrebbe fare?
    Stavo cercando un menù con multi-livelli da inserire su questa piattaforma. Lei cosa consiglia? Grazie! :)

    RispondiElimina
    Risposte
    1. Questo menù funziona solo per blog su piattaforma Blogger. Non so se esiste qualcosa di simile per Tumblr
      @#

      Elimina
    2. Non potresti documentarti? Mi piacerebbe un sacco trovare un menù del genere da inserire su Tumblr...

      Elimina
    3. È già tanto se trovo il tempo per documentarmi su Blogger :)
      Mi sono occupato raramente di Tumblr
      @#

      Elimina
  11. Ciao Ernesto. Ho installato questo menu sul sito della scuola materna di mio figlio che ho rifatto completamente (http://www.asilozanella.it/). Esattamente quello che serviva, grazie.
    Ti chiedo questo, però, perché non riesco davvero a trovare la soluzione, più che altro volevo capire se sono io che non ci arrivo oppure se la cosa proprio non è possibile.
    Ogni voce principale del menù rimanda ad una pagina statica. Vorrei che le sottovoci rimandassero alla stessa pagina statica, ma a punti differenti della stessa. Ti faccio l'esempio pratico, che è l'unico attualmente visibile sul sito: VITA SCOLASTICA ha come sottovoci Gli orari, L'abbigliamento, I pasti, Assenze e malattia. Clikkando su I pasti, tanto per fare un esempio, vorrei che la pagina si aprisse esattamente al suo terzo paragrafo. Spero di essere stata sufficientemente chiara.
    Attualmente (e tanto per non fare comparire l'avviso che la pagina del blog non esiste) ho inserito il medesimo link (quello alla pagina statica) per tutte e quattro le sottovoci. La pagina dunque si apre sempre all'inizio, però non sarebbe esattamente quello che avevo in mente.
    Ho provato a dare un'occhiata al tuo articolo http://www.ideepercomputeredinternet.com/2013/10/segnalibri-pagina-web-marcatore-hash-url-frammento.html però ho l'impressione non sia esattamente quello giusto.
    Ti ringrazio anticipatamente.

    RispondiElimina
    Risposte
    1. Invece è proprio il post giusto per fare quello che chiedi. In una delle voci secondarie incolla questo link per esempio
      http://www.asilozanella.it/p/la-vita-scolastica_8.html#orari
      quindi vai all'inizio del capitolo degli Orari che potrebbe essere un titolo o un paragrafo. Devi modificare il codice in questo modo
      <h3 id="orari">Titolo degli Orari</h3>
      nel caso che tu abbia usato il tag di un titolo oppure
      <p id="orari"> Inizuio ddel paragrafo degli orari....
      nel caso tu abbia solo usato dei paragrafi.
      Per gli altri link utilizzi la stessa tecnica. Per esempio
      http://www.asilozanella.it/p/la-vita-scolastica_8.html#abbigliamento e
      http://www.asilozanella.it/p/la-vita-scolastica_8.html#pasti
      per poi creare gli ID corrispondenti. Ricordati di non usare spazi.

      @#

      Elimina
    2. Wow funzionaaaaa!!! Grazie mille, favoloso.
      Però ti posso chiedere una cosa (tanto per capire fino in fondo)?
      Quando leggo sul tuo post:
      per la demo di una stella a 6 punte ho messo questo link
      http://blog-statico.blogspot.it/#star-six1
      e prima del # ci trovo /
      come mai nel mio link di esempio qui sopra / sparisce?
      http://www.asilozanella.it/p/la-vita-scolastica_8.html#orari
      Io, prima, lo mettevo. Può essere che sia stato per questo che non mi riusciva, cioè per quello / in più?
      Ho riletto più volte il post, mi sono persa io il passaggio oppure è ovvio toglierlo (ma non per me)?

      Elimina
    3. La slash non va messa. Se nel post c'è si tratta di un refuso. Ora sono al cellulare ma quando vado al PC rimedio (se me lo ricordo)

      @#

      Elimina
  12. Ciao Ernesto, ho già seguito i tuoi consigli un bel po' di volte, e ieri ho deciso di mettere il menu sul mio blog (http://www.italianskiblog.com/) e funziona benone!
    Un'unica domanda: nel caso è possibile staccare il menu dall'immagine d'intestazione?

    RispondiElimina
    Risposte
    1. Adesso non posso testare quindi non posso assicurare che funzioni ma prova a aggiungere la riga
      margin-bottom:30px;
      dopo la riga
      border-radius:12px; /* Raggio curvatura bordi voci principali */

      @#

      Elimina
    2. Funziona anche bene! Grazie e a presto!

      Elimina
  13. Ciao Ernesto e innanzitutto grazie per tutte le conoscenze che metti così gentilmente a nostra disposizione.
    In un blog di prova stavo cercando di "creare" questo menù. Mi funziona tutto, solo che è tutto spostato a sinistra. Mi chiedevo perciò se fosse possibile centrarlo.

    In alternativa mi piacerebbe sapere se è possibile, inserendo qualche codice, rendere a più livelli il menù che ho già inserito mesi fa nel blog e che puoi vedere qui: http://scarabocchidipensieri.blogspot.it/

    Grazie ancora!

    RispondiElimina
    Risposte
    1. @# Non ti so dire su due piedi se sia possibile centrarlo. Prova a incollare questa riga di codice
      <div align='center'>

      prima di

      <div id='menuMultilevel'>
      <ul class='menu'>
      .....

      e l'altro tag

      </div>

      alla fine dello stesso codice cioè dopo

      <!-- Casella di Ricerca Fine -->
      </ul>
      </div>

      Elimina
    2. Così Funziona, anche io avevo il problema e ho risolto aggiungendo un div sopra con allineamento al centro :)

      Elimina
  14. Sarebbe possibile modificare anche il colore delle voci presenti nel menu principale?

    RispondiElimina
  15. Intendo al passaggio del mouse...
    Spiegandomi meglio e guardando l'immagine contenente il menu d'esempio: come per la Voce 2.2 mi piacerebbe avvenisse lo stesso per la Voce 2

    RispondiElimina
    Risposte
    1. Sì è possibile. Aggiungi questa riga di codice

      .menu li.top a:hover {background:#008250;}

      subito dopo

      .menu li:hover li a {
      background:none;
      }

      Ovviamente puoi scegliere il colore che ti pare
      @#

      Elimina
    2. Ho fatto questa modifica che dici anche al mio menù :))
      Non ci avevo pensato :)
      @#

      Elimina
  16. Ciao Ernesto ho inserito questo menu nel mio blog ed è perfetto. Nella versione mobile però è un disastro, come posso risolvere? È possibile adattarlo o metterlo magari in verticale anziché in orizzontale solo per la versione mobile? Grazie

    RispondiElimina
    Risposte
    1. ps il blog è gattosandro-viaggiatore.blogspot.it

      Elimina
    2. La soluzione migliore è quella di lasciare il widget solo per la versione desktop. Per la versione mobile si può installare un altro menù. Leggi qui
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      @#

      Elimina
    3. Ok, ho messo il menu per la versione mobile ma adesso li ho tutti e due. Devo inserire questo codice:

      Codice del menù

      Giusto? Solo che non ho capito dove. Scusami e grazie per il tuo prezioso aiuto.

      Elimina
    4. Devi seguire il post che ti ho linkato nel commento 16.b. Per non visualizzare questo menù nella versione mobile devi inserire due tag condizionali sopra e sotto il codice del menù che si trova in questa pagina
      https://docs.google.com/document/d/1-Lrw6-KDvlKaszgWSchyUfV1Ri7_b4uJ-uwMHvqZuN8/pub
      In sostanza devi incollare questo blocco di codice

      <b:if cond='!data:blog.isMobile'>
      ..... Codice del menù di cui c'è un esempio in questa pagina https://docs.google.com/document/d/1-Lrw6-KDvlKaszgWSchyUfV1Ri7_b4uJ-uwMHvqZuN8/pub ....
      </b:if>

      Ovviamente il blocco di codice tra i puntini di sospensione è solo una indicazione
      @#

      Elimina
  17. Ora ho capito! Grazie mille

    RispondiElimina
  18. Buona sera la ringrazio per le utilissime informazioni che mi sta fornendo da anni con il suo blog, riguardo questo post ormai datato più di 3 anni fa ma affrontato da me adesso, vorrei chiederle perchè non mi cambia il formato dei font del menù? sebbene io lo cambi dove descritto, non cè niente da fare! e purtroppo la lettura del menu diventa difficoltosa essendoci un testo di piccole dimensioni. se mai dovesse leggere questo post potrebbe darmi una soluzione a questo problema? la ringrazio stefano

    RispondiElimina
    Risposte
    1. Non ho capito se vuoi cambiare la famiglia di font o le dimensioni o tutte e due le cose. Può darsi che vengano ereditate delle impostazioni del sito. Per la famiglia di font cambia entrambe queste due righe
      ont-family:arial, verdana, sans-serif;
      font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;

      con

      font-family: Georgia !important;

      dove al posto di Georgia metti la famiglia di font che preferisci. Per la dimensione c'è solo questa riga
      font-size:13px;
      che puoi modificare in questo modo
      font-size:16px !important;
      Dove al posto di 16 metti il valore che credi. Dovrebbe funzionare
      @#

      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.