Pubblicato il 20/04/13e aggiornato il

Menù orizzontale su due livelli per Blogger senza javascript.

Menù orizzontale multilivello per Blogger creato senza l'utilizzo di javascript e visibile con tutti i browser.
Il menù è un componente importante che difficilmente può mancare in un sito web visto che favorisce la navigazione dei lettori e li agevola nel trovare i contenuti di loro interesse. Gli utenti di Blogger possono usare le pagine statiche per realizzare un semplice menù orizzontale anche con link esterni al sito. Una delle richieste più ricorrenti che mi vengono fatte nei commenti è quella di poter inserire delle voci secondarie in tale menù ufficiale di Blogger. Al momento non è possibile farlo quindi per realizzare un menù su più livelli occorre usare dei sistemi un tantino più complicati che prevedono in genere l'utilizzo dei javascript che come è noto rallentano il caricamento delle pagine.

Ci sono però delle eccezioni e oggi vado a presentare un menù su due livelli che fa uso solo delle funzioni di Blogger e dei fogli di stile. L'aspetto di un tale menù sarà il seguente

aspetto-menù-2-livelli

con la possibilità di personalizzare i colori e aggiungere tutte le voci che si vogliono. Per prima cosa si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice della struttura del menù

<div id='IpCeImenu'>
      <ul id='IpcI'>
        <li>
          <a href='#'>Home</a>
          <ul>
         <li><a href='#'>About</a></li>
                <li><a href='#'>Contattami</a></li>
                <li><a href='#'>Privacy</a></li>
                <li><a href='#'>Facebook</a></li>
                <li><a href='#'>Twitter</a></li>
              </ul> 
        </li>   
        <li>
          <a href='#'>Voce 1</a>
          <ul>
                <li><a href='#'>Voce 1.1</a></li>
                <li><a href='#'>Voce 1.2</a></li>
                <li><a href='#'>Voce 1.3</a></li>
              </ul>
       </li>
        <li>
          <a href='#'>Voce 2</a>
          <ul>
                <li><a href='#'>Voce 2.1</a></li>
                <li><a href='#'>Voce 2.2</a></li>
                <li><a href='#'>Voce 2.3</a></li>
              </ul>
        </li>
        <li>
          <a href='#'>Voce 3</a>
          <ul>
                <li><a href='#'>Voce 3.1</a></li>
                <li><a href='#'>Voce 3.2</a></li>
                <li><a href='#'>Voce 3.3</a></li>
              </ul>
        </li>
        <li>
          <a href='#'>Voce 4</a>
          <ul>
                <li><a href='#'>Voce 4.1</a></li>
                <li><a href='#'>Voce 4.2</a></li>
                <li><a href='#'>Voce 4.3</a></li>
                <li><a href='#'>Voce 4.4</a></li>
                <li><a href='#'>Voce 4.5</a></li>
                <li><a href='#'>Voce 4.6</a></li>
                <li><a href='#'>Voce 4.7</a></li>
              </ul>
        </li>
      </ul>
    </div>

Al posto dei cancelletti # dovrete inserire gli URL dei post, delle pagine o dei link esterni per esempio agli account dei social network. Mentre al posto delle varie voci principali e secondarie si inserisce il testo che dovrà essere visibile ai lettori. Il numero delle voci principali e secondarie è modificabile, occorre soltanto mantenere la sintassi e ricordarsi che le voci secondarie devono iniziare con il tag <ul> e terminare con </ul> mentre ciascun elemento del menù inizierà con il tag <li> e terminerà con </li>. Tale elemento pagina va trascinato e posizionato sotto l'Intestazione o sotto il menù delle Pagine se avete intenzione di mantenere anche quello.

posizionamento-menù-due-livelli

Andate in alto a destra e cliccate su Salva disposizione. Il menù in questa fase avrà un aspetto orribile perché non sono stati ancora inseriti nel template i CSS relativi. Alla fine sarà così



Dopo aver salvato il template recatevi su Modello > Modifica HTML, cliccate nell'area del codice e digitate Ctrl+F quindi, nel campo Search, incollate la stringa </head>. Cliccate su Invio e questa verrà immediatamente evidenziata nel modello. Subito sopra a questa incollate questo codice

<!-- Menù Orizzontale a 2 livelli Inizio by www.ideepercomputeredinternet.com -->
<style type="text/css">
#IpCeImenu {
    background: #221c1c !important;
    width: 100%;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #a70100;
        height:35px;
}
#IpcI {
    margin: 0;
    padding: 0;
}
#IpcI ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#IpcI li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #444;
        border-right:1px solid #444;
        height:35px;
}
#IpcI li a, #IpcI li a:link, #IpcI li a:visited {
    color: #FFF;
    display: block;
    font:normal 12px Trebuchet, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
#IpcI li a:hover, #IpcI li a:active {
    background: #f20100;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;  
}
#IpcI li {
    float: left;
    padding: 0;
}
#IpcI li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 140px;
    margin: 0;
    padding: 0;
}
#IpcI li ul a {
    width: 140px;
}
#IpcI li ul ul {
    margin: -25px 0 0 161px;
}
#IpcI li:hover ul ul, #IpcI li:hover ul ul ul, #IpcI li.sfhover ul ul, #IpcI li.sfhover ul ul ul {
    left: -999em;
}
#IpcI li:hover ul, #IpcI li li:hover ul, #IpcI li li li:hover ul, #IpcI li.sfhover ul, #IpcI li li.sfhover ul, #IpcI li li li.sfhover ul {
    left: auto;
}
#IpcI li:hover, #IpcI li.sfhover {
    position: static;
}
#IpcI li li a, #IpcI li li a:link, #IpcI li li a:visited {
    background: #ff3837;
    width: 140px;
    color: #FFF;
    display: block;
    font:normal 12px Trebuchet, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #444;
}
#IpcI li li a:hover, #IpcI li li a:active {
    background: #473b3b;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
</style>
<!-- Menù orizzontale a 2 livelli Fine -->

che determina l'aspetto del menù. Si possono fare diverse personalizzazioni ma in alcuni modelli i colori saranno ereditati dal blog e dalle tonalità scelte in Personalizza per il menù delle pagine statiche. Per modificare i colori e altri parametri vi consiglio di leggere i post sui codici dei colori e sullo stile dei bordi. Le modifiche più rilevanti da compiere sono state colorate di rosso. Mi limito a ricordare su che cosa operano alcuni codici dei colori e dei caratteri
  1. 221c1c è il colore di background del menù principale -
  2. f20100 è il colore di background quando il mouse passa su una scheda
  3. ff3837 è il colore del menù quando il cursore passa su una voce principale
  4. 473b3b è il colore di sfondo quando si passa sopra a una voce secondaria con il mouse
  5. FFF cioè FFFFFF è il colore del testo delle varie voci
  6. 444 cioè 444444 è il colore del bordo
  7. E' anche possibile modificare dimensioni e font dei caratteri nella riga evidenziata di giallo.
Questo menù sarà correttamente visibile con Firefox e Chrome ma non con Internet Explorer. Per fare in modo che il menù possa essere correttamente visto e usato anche da chi usa quel browser occorre fare una piccola modifica al template inserendo una riga per rendere il blog compatibile anche con Internet Explorer. A tal proposito vi consiglio di operare secondo le indicazioni del post





27 commenti :

  1. Un bel menù.Grazie, l'ho subito utilizzato.

    RispondiElimina
  2. Ehi ciao Ernesto, a me purtroppo non funziona.. Può dipendere dal mio modello? Grazie in anticipo per la risp

    RispondiElimina
    Risposte
    1. @# Sì non funziona in tutti i modelli ma solo in quelli in cui gli elenchi se inseriti sotto l'header o nella zona del menù delle pagine statiche vengono mostrati in orizzontale invece che in verticale.

      Elimina
  3. Perdonami se tiscoccio, ma avevo applicato un "Menu Trasparente" su un mio blog. L'ho importato su un altro blog ma ho un problema, lo sfondo non compare e le scritte della tendina si sovrappongono a quelle che si trovano sul blog. La tendina, insomma, è trasparente. Ti scrivo qui perchè:
    1. non trovo più il link al post relativo
    2. sto cercando di modificare senza successo il css per far comparire lo sfondo ed eliminare il problema.

    il blog è spreadingwaterpolo [dot] blogspot[dot] it

    Mi puoi aiutare?

    RispondiElimina
    Risposte
    1. @# Ho guardato ma non riesco a ricordarmi a quale post di riferisca, mi spiace

      Elimina
    2. Secondo te il problema è di "collisione" con altri widget oppure c'è modo di creare una tendina bianca invece che invisibile? Quale comando potrei toccare?

      Grazie di esistere.

      Elimina
    3. MA Vieni!!! Che ti conosco solo Iooo!!
      Ci sono riuscito, ho trovato la parte di codice che controlla la trasparenza del menu a tendina. Parlo sempre del mio blog, se vuoi ti rimando il codice del "Menu Trasparente", che non trovo più nel tuo database.

      Insomma, da:

      ul.dropdownmenu ul a {
      padding: 4px 5px 4px 12px;


      Basta aggiungere

      border: solid 1px #0047AB;
      background-color:#ffffff;

      Senza queste due righe lo sfondo è trasparente.

      Mi faceva piacere fartelo sapere, anche per ringraziarti della curiosità che stimoli e che mi permette di imparare qualcosa!

      Elimina
  4. ciao! a me funzione molto bene, ti volevo chiedere se si poteva cambiare il carattere del testo!

    RispondiElimina
    Risposte
    1. Sì, mi sono dimenticato di scriverlo nel post. Al posto di Trebuchet metti il nome di un'altra famiglia di font
      @#

      Elimina
  5. Ciao Ernesto, purtroppo ho un problema...il sottomenù viene visualizzato per brevissimo tempo ed appena si prova a spostare il cursore su una delle sue voci, l' intero sotto menù scompare. E' un problema comune? Si può fare qualcosa?

    RispondiElimina
    Risposte
    1. tutti i menu che ho provato fino ad ora non hanno funzionato bene. Il sottomenù non viene visualizzato (come se venisse nascosto dal post)

      Elimina
    2. Nella Demo funziona. Forse usi una vecchio versione di IE come browser oppure hai modificato delle distanze. Se lo hai fatto può capitare quel problema
      @#

      Elimina
  6. Ciao Ernesto, ho un problema con il codice; in particolare riguardo l'utilizzo delle url al posto dei cancelletti. Il problema è che non so dove prendere gli url delle pagine. Sono alle prime armi con blogger come avrai capito. Grazie in anticipo.

    RispondiElimina
    Risposte
    1. È semplicissimo. Ciascuna pagina del tuo blog ha un indirizzo. L'indirizzo si vede nella barra del browser posta in alto. Per esempio l''indirizzo di questo post è
      http://www.ideepercomputeredinternet.com/2013/04/menu-orizzontale-blogger.html
      Al posto dei cancelletti devi mettere gli indirizzi (si chiamano URL) delle pagine che vuoi che si aprano quando si clicca sopra alla voce relativa
      @#

      Elimina
  7. Ciao Ernesto, scusa se ti disturbo di nuovo, ho risolto il problema degli url ma ora il problema è con le sub-pagine. In pratica non visualizzo la tendina delle sub-pagine e inoltre non capisco se ad esempio devo creare una pagina "About" e "Contattami" da visualizzare come sub-pagine di "Home" oppure debbo dare un url particolare per generarle. Grazie in anticipo.

    RispondiElimina
    Risposte
    1. Puoi organizzare il menù come ti pare. Però se non si vedono le pagine secondarie significa che hai sbagliato qualcosa nella realizazione del menù. Prima di procedere incolla il menù così come l'ho creato io per vedere se funziona e poi passa alle modifiche. Gli indirizzi vanno messi al posto dei cancelletti. Per esempio per questo sito la prima voce del menù sarebbe
      < href='http://www.ideepercomputeredinternet.com/' >Home

      Elimina
    2. Buonasera Ernesto. Ho copiato il tuo codice così come lo hai scritto e non visualizzo comunque le sub-pagine. Dove sbaglio? Uso Firefox.

      Elimina
    3. Hai trascinato l'elemento HTML/Javascript sotto l'Intestazione salvando la disposizione? Se è così significa che il tuo modello e questo menù sono incompatibili. Puoi sempre provare uno dei tanti menù presenti in queste raccolte
      http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html
      http://www.ideepercomputeredinternet.com/search/label/menu

      Elimina
    4. Ho risolto col menù inserendolo correttamente. Vorrei gentilmente chiederti come visualizzare un'icona/immagine a fianco delle voci del menù. Grazie.

      Elimina
    5. Per visualizzare una immagine sulla sinistra di una voce del menù devi per per esempio cambiare questa riga di codice
      <li><a href='#'>Contattami</a></li>
      con quest'altra
      <li><a href='#'><img src='URL IMMAGINE'/> Contattami</a></li>

      Elimina
    6. Ernesto scusa se ti domando ancora ma l'icona che ho scelto me la mette sotto la voce del menù invece che a fianco a sinistra. Esiste un altro metodo? Grazie ancora.

      Elimina
    7. Potrebbe essere un problema di larghezza. Con width: 140px; significa che immagine e testo non devono superare questa larghezza. Prova a rimpicciolire l'immagine, a diminuire i caratteri del testo e a aumentare la larghezza da 140 pixel a un numero più grande. Non assicuro che funzionerà. Le immagini sono sempre difficili da inserire nei menù
      @#

      Elimina
  8. Ciao Ernesto ho messo questo menu sul blog e funziona perfwttamente,grazie :)

    RispondiElimina
  9. Salve Ernesto, non so se dico una cavolata, ma si può realizzare un menù del genere usando il solo gadget Html/Javascript senza andare a modificare l'html del modello? Cioè inserire tutto il codice all'interno del gadget, così da poterlo inserire e disinserire facilmente? Grazie.

    RispondiElimina
    Risposte
    1. Sì lo puoi fare. Il codice che devi incollare sopra al tag < /head > basta che tu lo incolli su HTML / Javascript prima dell'altro codice. Dovrebbe funzionare
      @#

      Elimina
    2. Si, funziona! Grazie. :)

      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.