Pubblicato il 15/11/13e aggiornato il

Menù orizzontale su tre livelli per Blogger con HTML5.

Come installare nel modello d Blogger un menù orizzontale a 3 livelli usando HTML5 e CSS3 senza javascript.
Solo un paio di anni fa gli webmaster di tutto il mondo integravano nei loro siti librerie javascript per arricchire le pagine web di effetti, slideshow e menù molto funzionali. Dopo che Google ha inserito la velocità di caricamento come uno dei parametri che determinano il posizionamento nei risultati di ricerca si assiste a un'inversione di 180°.  L'obiettivo di adesso è quello di togliere tutti i javascript non essenziali e di utilizzare le nuove tecnologie come il CSS3 per creare queste stesse funzionalità senza appesantire la pagina. Ricordo di aver già presentato un menù orizzontale su due livelli da inserire in un gadget HTML / Javascript e un menù flottante sempre visibile che non utilizzano javascript. Altri esempi si possono trovare nell'elenco dei Migliori Menù per Blogger.

In questo articolo vediamo come realizzare un menù utilizzando oltre al CSS3 anche l'HTML5 e segnatamente il tag <nav> che introduce una sezione di una pagina che contiene link a altre pagine dello stesso documento, in pratica si tratta di una sezione con link di navigazione vale a dire un menù in senso lato. Tale tag <nav> non sostituisce gli elenchi e i tag relativi <ul> e <li> devono essere ivi racchiusi. Il menù che vado a presentare può essere inserito nel modello oppure anche in un gadget HTML/Javascript. Il suo aspetto sarà simile a questo

menù-orizzontale-tre livelli

Nella demo che ho pubblicato in rete l'ho inserito al top del layout



In questo caso l'optimum sarebbe nascondere la Navbar e eliminare lo spazio che rimane nella parte alta. Nel codice che andrò a presentare sono presenti anche due righe per inserire queste modifiche che potranno essere tolte da chi non vi è interessato o che voglia installare il menù da un'altra parte. Come al solito dobbiamo salvare il template e andare su Modello > Modifica HTML > Vai al widget > Navbar1 per individuare Barra di Navigazione nel Modello 

codice-navbar-blogger

Subito sotto </b:section> si incolla il seguente codice

<!-- Menù HTML5 Inizio --> <style>
#navbar-iframe { display: none !important; }
nav {   
  display: block;
  text-align: center;
  margin-top: -30px; }
nav ul {
  margin: 0;
  padding:0;
  list-style: none;
}
.nav a {
  display:block;
  background: #111;
  color: #fff;
  text-decoration: none;
  padding: 0.8em 1.8em;
  text-transform: uppercase;
  font-size: 80%;
  letter-spacing: 2px;
  text-shadow: 0 -1px 0 #000;
  position: relative;
}
.nav{ 
  vertical-align: top;
  display: inline-block;
  box-shadow:
    1px -1px -1px 1px #000,
    -1px 1px -1px 1px #fff,
    0 0 6px 3px #fff;
  border-radius:6px;
}
.nav li {
  position: relative;
}
.nav > li {
  float: left;
  border-bottom: 4px #aaa solid;
  margin-right: 1px;
}
.nav > li > a {
  margin-bottom: 1px;
  box-shadow: inset 0 2em .33em -0.5em #555;
}
.nav > li:hover,
.nav > li:hover > a {
  border-bottom-color: #ffa500;
}
.nav li:hover > a {
  color:#ffa500;
}
.nav > li:first-child {
  border-radius: 4px 0 0 4px;
}
.nav > li:first-child > a {
  border-radius: 4px 0 0 0;
}
.nav > li:last-child {
  border-radius: 0 0 4px 0;
  margin-right: 0;
}
.nav > li:last-child > a {
  border-radius: 0 4px 0 0;
}
.nav li li a {
  margin-top: 1px;
}
.nav li a:first-child:nth-last-child(2):before {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  top: 50% ;
  right:5px; 
}
/*posizionamento dei sottomenù */
.nav ul {
  position: absolute;
  white-space: nowrap;
  border-bottom: 5px solid  #ffa500;
  z-index: 1;
  left: -99999em;
}
.nav > li:hover > ul {
  left: auto;
  margin-top: 5px;
  min-width: 100%;
}
.nav > li li:hover > ul {
  left: 100%;
  margin-left: 1px;
  top: -1px;
}
/* stile della freccia */
.nav > li > a:first-child:nth-last-child(2):before {
  border-top-color: #aaa;
}
/* Stile della freccia al passaggio del cursore */
.nav > li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent;
  border-bottom-color: #ffa500;
  margin-top:-5px
}
.nav li li > a:first-child:nth-last-child(2):before { 
  border-left-color: #aaa;
  margin-top: -5px
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent;
  border-right-color: #ffa500;
  right: 10px;
}
</style>
<!-- Struttura del Menu -->
<nav>
  <ul class='nav'>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>About</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>
        <li><a href='#'>Voce 1.4</a></li>
      </ul>
    </li>
    <li><a href='#'>Widget</a>
      <ul>
        <li><a href='#'>Sottomenu</a></li>
        <li><a href='#'>Voce 2.2</a>
          <ul>
            <li><a href='#'>Voce 2.2.1</a></li>
            <li><a href='#'>Voce 2.2.2</a></li>
            <li><a href='#'>Voce 2.2.3</a></li>
            <li><a href='#'>Voce 2.2.4</a></li>
          </ul>
        </li>
        <li><a href='#'>Voce 2.3</a></li>
        <li><a href='#'>Voce 2.4</a></li>
      </ul>
    </li>
    <li><a href='#'>Social</a>
    <ul>
        <li><a href='#'>Facebook</a></li>
        <li><a href='#'>Twitter</a></li>
        <li><a href='#'>Google Plus</a></li>
        <li><a href='#'>Pinterest</a></li>
        <li><a href='#'>Instagram</a></li>
      </ul>
    </li>
    <li><a href='#'>Foto</a>
      <ul>
        <li><a href='#'>Foto 1</a></li>
        <li><a href='#'>Foto 2</a></li>
        <li><a href='#'>Foto 3</a></li>
        <li><a href='#'>Foto 4</a></li>
      </ul>
    </li>
    <li><a href='#'>Video</a>
      <ul>
        <li><a href='#'>Video 1</a></li>
        <li><a href='#'>Video 2</a></li>
        <li><a href='#'>Video 3</a></li>
        <li><a href='#'>Video 4</a></li>
      </ul>
    </li>
    <li><a href='#'>Contatti</a></li>
  </ul>
</nav>
<!-- Menù HTML5 Fine -->

Si salva il modello. Le due righe evidenziate di giallo debbono essere cancellate se avete un template senza Navbar o se non intendete nasconderla. La prima parte del codice determina l'aspetto del menù e si possono personalizzare i codici dei colori e lo stile del bordo. La seconda parte è invece quella che determina la struttura vera e propria del menù. Al posto dei cancelletti ( # ) si devono inserire gli URL dei collegamenti mentre le voci visibili possono essere modificate secondo le nostre esigenze. 

La riga text-align: center; posizionerà il menù al centro del layout e ciascun elemento avrà una larghezza data dal numero dei caratteri della voce contenuta. Per creare dei sottomenù si procede inserendo un nuovo elenco in una riga superiore dal punto di vista gerarchico. Per esempio partendo da

<li><a href='#'>Contatti </a></li>


si possono creare i seguenti sottomenù

<li><a href='#'>Contatti </a>
<ul>
        <li><a href='#'>Contatto 1</a></li>
        <li><a href='#'>Contatto 2</a></li>
        <li><a href='#'>Contatto 3</a></li>       
      </ul> 

</li>

dove ho colorato di viola i due tag tra cui inserire un nuovo elenco colorato di blu.




5 commenti :

  1. CIAO VOLEVO DIRTI HO PROVATO AD INCOLLARE IL CODICE SOPRA PER IL SOTTOMENU' COME DA TUO ESEMPIO (IN BASSO CIO' CHE HO COPIATO):












    DOVE SBAGLIO... GRAZIE E SALUTI
    PS SCUSA IL MAIUSCOLO ERA PER DIFFERENZIARE I DUE TESTI.
    ALTRA COSA HO DOVUTO METTERE QUI IL CODICE "NOTE" PERCHE' IL FORM SI BLOCCA ;)

    RispondiElimina
    Risposte
    1. Per postare il codice in un commento deve essere convertito in XML. Comunque ti consiglio di procedere in questo modo
      1) Installa il menù così com'è
      2) Se ti funziona inizia a sostituire le voci e a inserire gli URL al posto dei cancelletti
      3) Basta una virgoletta in più o in meno e smette tutto di funzionare quindi ci vuole molta attenziona
      4) Usa un Editor tipo Notepad++ per fare le cose con più precisione
      http://www.ideepercomputeredinternet.com/2011/02/notepad-strumento-indispensabile-per.html
      @#

      Elimina
  2. Buongiorno, sto tentando di applicare questo codice in un blog di prova a questo indirizzo
    provamenudd(dot)blogspot(dot)it
    Anche nel blog definitivo utilizzerò quel modello base, tuttavia non riesco a far funzionare le tendine. Mi spiego meglio: si aprono, ma se cerco di posizionarmi sulle sottovoci col puntatore, si richiudono.
    Non è dovuto alla posizione in cui ho copiato il codice, poichè anche inserendolo al top del layout dava lo stesso problema. Ho provato anche altri Menu Drop Down da voi suggeriti, ma il risultato non cambia.
    Aggiungo che uso Google Chrome come browser.
    Grazie dell'attenzione.

    RispondiElimina
  3. @eileen
    Anche nella Demo c'è questo problema che si presenta quando si scorre il menù verticalmente in modo molto lento. Se si passa da una voce principale ai sottomenù in modo rapido invece non ci sono problemi.
    @#

    RispondiElimina
  4. @Ernesto
    Grazie per la tempestiva risposta, purtroppo continuo a riscontrare il problema in qualsiasi modo ci provi! Eppure dalla vostra demo lo visualizzo perfettamente. Ho optato per un altro dei vostri menu al momento, ma ci riproverò! ;)

    RispondiElimina

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.