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

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.

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

• Come visualizzare correttamente il blog su Blogger anche con Internet Explorer -