REDAZIONE

Cari MyBlogger,

poco tempo fa abbiamo visto come creare un menu a tendina personalizzato utilizzando Ajax, in questo tutorial vediamo come ricreare la stessa cosa utilizzando però soltanto codice HTML e CSS in modo da sfruttare al meglio tutte le funzionalità di MyBlog senza doversi appoggiare a server esterni e rendere quindi il nostro blog più veloce.

L’effetto che gli vogliamo dare è il seguente: passando il mouse su una delle voci del menù principale, lo sfondo della voce cambia e viene mostrato un menù a tendina con dei link. Anche qui, passando il mouse su uno di questi link, il colore del testo e dello sfondo cambiano. Per mostrarvi come crearlo, prenderemo come esempio il menù a tendina presente nel Blog Redazione.

Per prima cosa vediamo come costruire in HTML la struttura del menù a tendina.

     <ul id=”nomeID”>
      
      <li><a href=”#”>Voce 1</a><ul>
      <li><a href=”#”>Sottomenu 1.1</a></li>
      <li><a href=”#”>Sottomenu 1.2</a></li>
      <li><a href=”#”>Sottomenu 1.n</a></li>
      </ul></li>
      
      <li><a href=”#”>Voce 2</a><ul>
      <li><a href=”#”>Sottomenu 2.1</a></li>
      <li><a href=”#”>Sottomenu 2.2</a></li>
      <li><a href=”#”>Sottomenu 2.n</a></li>
      </ul></li>
      
      </ul>     

Come esempio pratico, per non riempire la pagina di troppo codice, prenderemo dal menù a tendina del Blog Redazione solo alcune voci. In particolare vogliamo visualizzare:

Home – Le sezioni di MyBlog.it – Blog e dintorni

E avremo questo codice HTML:

   <ul id="mymenu">
      
   <li><a href="http://redazione.myblog.it"><strong>Home</strong></a></li>
      
   <li><a href="#"><strong>Le sezioni di MyBlog.it</strong></a><ul>
   <li><a href="http://blog.virgilio.it/audioblog.html" target="_blank">
   Audio post</a></li>
   <li><a href="http://blog.virgilio.it/blog_giorno.html" target="_blank">
   Blog del giorno</a></li>
   <li><a href="http://blog.virgilio.it/bloglive.html" target="_blank">
   Blog live</a></li>
   <li><a href="http://blog.virgilio.it/photoblog.html" target="_blank">
   Foto post</a></li>
   <li><a href="http://blog.virgilio.it/blog_piu_visti.html" target="_blank">
   Migliori blog</a></li>
   <li><a href="http://blog.virgilio.it/post_piu_visti.html" target="_blank">
   Migliori post</a></li>
   <li><a href="http://blog.virgilio.it/funzionalita.html" target="_blank">
   Tutte le funzionalità</a></li>
   <li><a href="http://blog.virgilio.it/tutti_tag.html" target="_blank">
   Tutti i tag</a></li>
   <li><a href="http://blog.virgilio.it/videoblog.html" target="_blank">
   Video post</a></li>
   </ul></li>
      
   <li><a href="#"><strong>Blog e dintorni</strong></a><ul>
   <li><a href="http://community.virgilio.it/ugc/speciale/blog/" target="_blank">
   Blog Magazine</a></li>
   <li><a href="http://tecnologia.virgilio.it/" target="_blank">
   Consigli per scrivere un blog</a></li>
   <li><a href="http://virgiliopeople.virgilio.it/" target="_blank">
   Trova Amici</a></li>
   <li><a href="http://community.virgilio.it/" target="_blank">
   Virgilio Community</a></li>
   <li><a href="http://virgilioparliamone.myblog.it/" target="_blank">
   Virgilio? Parliamone</a></li>
   </ul></li>
      
   </ul>     

Se andiamo ad inserire questo codice nelle pagine del nostro blog vedremo tutte le voci del menù posizionate una sotto l’altra in un elenco puntato. Un po’ bruttino, non vi pare? Dobbiamo quindi creargli un "vestito" per rendere il menù più elegante. Per farlo utilizzeremo il codice CSS.

Diamo per scontato che conosciate i Fogli di stile, quindi non staremo a commentarvi ogni attributo che trovate di seguito. Anche questo è preso dal Foglio di stile del Blog Redazione.

      ul#mymenu{
      font: 70%/1.5 Verdena,Tahoma,sans-serif;
      color: #fff;
      background: #642eab;
      width:910px;
      height:26px;
      margin-left:7px;
      margin-top:-17px;
      line-height:26px;
      }
      ul#mymenu,ul#mymenu li,ul#mymenu ul,ul#mymenu ul li{
      margin:0;
      padding:0;
      list-style-type:none
      }
      ul#mymenu a{
      display:block;
      padding: 0 15px;
      text-decoration: none;
      color:#FFF;
      }
      ul#mymenu li{
      float: left;
      position: relative;
      }
      ul#mymenu li li{
      float: none;
      line-height: 22px;
      width:200px;
      display:block !important;
      display: inline;
      }
      ul#mymenu ul{
      position: absolute;
      top: 25px;
      left: -9999px;
      width: 12em;
      background: #fff;
      color: #642eab;
      }
      ul#mymenu ul{
      padding: 7px 0;
      border: 1px solid #642eab;
      width:200px;
      }
      ul#mymenu ul,ul#mymenu li li a{
      background-color: #FFF;
      color: #642eab;
      }
      ul#mymenu li:hover,ul#mymenu a:hover{
      background-color: #7143a8;
      color: #FFF;
      }
      ul#mymenu li:hover ul,ul#mymenu li.sfhover ul{
      left: -1px;z-index: 100;
      }     

Ora che abbiamo “cucito l’abito” del nostro menù a tendina non resta che applicarlo al codice HTML: dal pannello di gestione del blog, entriamo nella sezione “Presentazione > Opzioni avanzate” e clicchiamo sul link “Modifica modello” del Foglio di stile. All’interno della colonna destra della finestra che si è aperta, incolliamo il nostro codice CSS e salviamo le modifiche.

Adesso dobbiamo inserire il menù orizzontale a tendina nelle pagine del nostro blog. Vogliamo posizionarlo sotto l'header. Restiamo quindi all’interno della sezione “Presentazione > Opzioni avanzate” e inseriamo il nostro codice HTML all’interno di:

• Modello della homepage
• Modello della pagina categoria
• Modello di pagina Link permanente
• Template Tags

Cerchiamo le seguenti righe ed incolliamo il codice del menù subito dopo:

      <div id="banner">
      <div class="banner-decorator1">
      <div class="banner-decorator2">
      <h1><a href="{$blog.url}">{$blog.title}</a></h1>
      <h2>{$blog.description|default:"&nbsp;"}</h2>
      </div></div></div>     

Buon lavoro!