Tiny Dropdown per Menu su più livelli con inserimento di testo.

Riprendo la presentazione di menù da installare in blog su Blogger. Tiny Dropdown è stato realizzato da Scriptiny ed ha il pregio di essere personalizzabile come colori, numero di voci principali e secondarie, velocità, opacità e dissolvenza. Ma andiamo per gradi e andate a guardarvi la

• Demo del Menù Tiny Dropdown -

I colori di default sono sul grigio ma come detto si possono personalizzare e renderli compatibili con quelli del nostro sito

 

Come vedete dal precedente screenshot, è possibile inserire voci principali e voci secondarie insieme a delle porzioni di testo sotto il titolo indicato in figura come INFO. Ho messo le frecce ai vari colori del menù a beneficio di chi volesse sostituirli con i propri. Per l'installazione si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si cerca la riga </head> e, subito sopra, si incolla il codice

<!--TinyDropDownMenu Inizio-->
<style>
* {margin:0; padding:0; outline:0}
body {font:11px Verdana,Arial; color:#000000; background:#ffffff}
.nav {height:36px; background:#aaaaaa; color:#ffffff; text-shadow:1px 1px #888888; z-index:1000}
.menu a {float:left; color:#eeeeee; text-decoration:none; width:120px; height:28px; padding-top:8px}
.menu span {float:left; color:#eee; text-decoration:none; width:120px; height:28px; padding-top:8px}
.menu a:hover {color:#fff}
.menu {list-style:none; font:16px Arial,Verdana; text-align:center; width:600px; margin:0 auto}
.menu li {position:relative; float:left; width:120px; z-index:1000}
.menu ul {display:none; position:absolute; font:normal 13px Arial,Verdana; top:36px; left:0; background:#aaaaaa; display:none; list-style:none}
.menu ul li {float:none; border-top:1px solid #ccc; width:120px}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {float:none; display:block; background:none; height:22px; padding-top:5px}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {background:#999999; color:#ffffff}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {float:none; display:block; background:none; height:22px; padding-top:5px}
.menu ul ul {left:120px; top:0}
.menu li.submenu {font-weight:bold}
.menu li.noborder {border-top:none}
li.menuhover a, li.menuhover li.menuhover a {color:#ffffff; background:#999999}
li.menuhover span, li.menuhover li.menuhover span {color:#ffffff; background:#999999}
#info {width:180px; background:#eeeeee}
#info li {width:160px; border-top:none; padding:8px 10px; color:#666666; text-shadow:1px 1px #fff; text-align:left}
</style>
<script src='https://sites.google.com/site/scriptperilblog/menu/tinydropdown.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/ScaLK' target='_blank'><span style='font-size: x-small;'>TinyDropdown Menu</span></a></noscript>
<!--TinyDropDownMenu Fine - http://www.ideepercomputeredinternet.com-->

Come vedete ci sono moltissimi parametri che si possono modificare. Ricordo solo i più importanti facendo riferimento anche al precedente screenshot

1. Il colore di sfondo del menù è #aaaaaa;
2. Il colore di sfondo di una voce puntata con il mouse è #999999;
3. Il colore del testo dei titoli del menù è #ffffff;
4. Il colore del testo nella voce INFO è #666666;
5. Il colore di sfondo nella voce INFO è #eeeeee;
6. La larghezza del menù è 600 pixel e 120 pixel quella di ciascuna voce
7. Il colore della ombreggiatura dei titoli è #888888;

Questi come altri parametri possono essere modificati ricordandosi come funzionano i codici dei colori. Si salva il modello. Adesso dobbiamo andare su Design > Aggiungi un gadget > HTML/Javascript e si incolla un codice simile a questo

<div class="nav">
  <ul id="menu" class="menu">
    <li class="nodiv"><a href="#">HOME</a></li>
    <li>
      <a href="#">ITEM 1</a>
      <ul>
        <li><a href="#">Submenu 1.1</a></li>
        <li><a href="#">Submenu 1.2</a></li>
        <li class="submenu">
          <a href="#">MORE</a>
          <ul>
            <li class="noborder"><a href="#">More 1</a></li>
            <li><a href="#">More 2</a></li>
            <li><a href="#">More 3</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <span>ITEM 2</span>
      <ul>
        <li><a href="#">Submenu 2.1</a></li>
        <li><a href="#">Submenu 2.2</a></li>
        <li><a href="#">Submenu 2.3</a></li>
        <li class="submenu">
          <span>MORE</span>
          <ul>
            <li class="noborder"><a href="#">More 1</a></li>
            <li><a href="#">More 2</a></li>
            <li><a href="#">More 3</a></li>
            <li><a href="#">More 4</a></li>
            <li><a href="#">More 5</a></li>
          </ul>
        </li>
        <li><a href="#">Submenu 2.5</a></li>
        <li><a href="#">Submenu 2.6</a></li>
      </ul>
    </li>
    <li>
      <a href="#">ITEM 3</a>
      <ul>
        <li><a href="#">Submenu 3.1</a></li>
        <li><a href="#">Submenu 3.2</a></li>
        <li><a href="#">Submenu 3.3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">INFO</a>
      <ul id="info">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce justo nulla, malesuada in porta vitae, fermentum ac nulla. </li>
      </ul>
    </li>
  </ul>
</div>
<script type="text/javascript">
  var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'});
</script>

Si tratta chiaramente di uno schema di menù. Per riempirlo con i nostri dati, bisogna operare in questo modo

1. Ogni cancelletto ( # ) deve essere sostituito dall'URL della pagina della voce relativa. Alcune voci come MORE o INFO possono anche essere lasciate senza URL.
2. Tutti nomi scritti in blu possono essere cambiati con i titoli dei vostri menù.
3. Se si vogliono mettere dei sottomenù occorre inserire <li class="submenu">.
4. Una voce senza voci secondarie si denota con <li class="nodiv">
5. Le voci con sottomenù si indicano come <li class="noborder">
6. Se si vuole inserire del testo in un elemento occorre richiamare la classe <ul id="info">
7. Al posto di Lorem ipsum… si può inserire il testo che più ci piace

Si clicca su Salva e si posiziona l'elemento nella parte alta del blog subito sotto l'Intestazione o subito sopra l'area dei post. La penultima riga evidenziata di viola ha il compito di personalizzare il funzionamento del menù. Ricordo che ci sono due parametri fondamentali che sono

• id : indica il nome dell'attributo. Esempio: id:'menu'
• acrive : indica la classe CSS attiva. Esempio: active:'menuhover' 

Gli altri parametri sono invece opzionali:

• fade : indica l'opacità; true se si vuole inserire l'effetto, false se non si vuole visualizzare
• slide : effetto scorrimento; true se si vuole inserire, false se non si vuole visualizzare
• speed : rappresenta la velocità dell'effetto toggle (i valori accettati sono da 1 a 9; 5 di default)
• timeout : la durata dell'effetto

Un esempio di codice potrebbe essere questo

var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover', fade:true, slide:true, timeout:200});

che ho testato nel post di prova e che funziona benissimo anche se poi ho lasciato il codice senza effetti opzionali. Nel caso aveste un template creato con il Designer Modelli e non riusciste a installare questo menù, potete provare a modificare il modello preventivamente per renderlo più recettivo ai menù come illustrato nell'articolo

• Come installare i menù nei template del Designer Modelli -