Un fantastico Menu Accordion con effetto scroll

Per chi ha bisogno di spazio e vuole sistemare graficamente e non solo il suo sito o blog, mettendo in ordine  tutti i link, le pagine, le etichette e qualsiasi cosa, questo post sarà sicuramente di grande aiuto.
Come vedete nell'immagine (cliccando qui o sopra l'immagine si aprirà la demo che ho preparato per darvi meglio l'idea), abbiamo una lista di link, che all'interno contengono altri link.
Cliccandoci sopra, vedrete l'effetto scroll che visualizza il contenuto della categoria scelta.
E' una specie di "Mobiletto con cassetti", dove possiamo inserire e tenere in ordine tutto quello che vogliamo. Possiamo inserire i nostri "Blog Amici", le etichette piu richieste, la lista dei nostri libri o film preferiti, e tutto chiuso in uno spazio piccolo e graficamente bellissimo.
Per inserirlo è facilissimo. Vediamo come:
1 - Collegatevi a blogger.
2 - Andate in Layout, clickate su Aggiungi un gadget pagina, poi su HTML/JavaScript, inserite il codice sotto:

<!-- inizio cod CSS --> <style type="text/css"> .menuPad { height:2px; } #slide { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#000000 none repeat scroll 0 0; font-family:arial,sans-serif; font-size:12px; margin:0; padding:10px; position:absolute; width:181px; } #slide dt { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(back.png) repeat scroll 0 0; color:#DDDDDD; cursor:pointer; font-weight:bold; height:37px; line-height:37px; margin:0; padding:0; text-align:center; width:181px; } #slide dt.slide { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(back.png) repeat scroll left bottom; color:#FFFFFF; } #slide dt a { color:#FFFFFF; display:block; height:37px; line-height:37px; text-decoration:none; } #slide dt a:hover { color:#FFCC00; } #slide dd { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#EEEEEE url(shade.png) no-repeat scroll left top; height:0; margin:0; overflow:hidden; padding:0; position:relative; text-align:center; width:181px; } #slide dd ul { bottom:0; height:auto; left:0; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; position:absolute; } #slide dd ul li { border-bottom:1px solid #AAAAAA; height:25px; line-height:25px; width:181px; } #slide dd ul li a { color:#666666; display:block; font-size:11px; height:25px; text-decoration:none; } #slide dd ul li a:hover { color:#000000; } </style> <!-- fine cod CSS --> <dl id="slide"> <dt><a href="">HOME</a></dt> <dt id="item1" class="">Prima Categoria</dt> <dd id="sitem1" style="height: 0px;" class=""> <ul> <li><a href="inserire qui il link">Primo link</a></li> <li><a href="inserire qui il link">Secondo link</a></li> <li><a href="inserire qui il link">Terzo link</a></li> </ul> </dd> <dt id="item2" class="">Seconda Categoria</dt> <dd id="sitem2" class="" style="height: 0px;"> <ul> <li><a href="inserire qui il link">Primo link</a></li> <li><a href="inserire qui il link">Secondo link</a></li> <li><a href="inserire qui il link">Terzo link</a></li> </ul> </dd> <dl> <div class="menuPad"></div> <!-- inizio cod JAVASCRIPT --> <SCRIPT> var getdd = document.getElementById('slide').getElementsByTagName("DD"); var getdt = document.getElementById('slide').getElementsByTagName("DT"); for (var i=0; i<getdt.length; i++) { getdt[i].onclick=function() { if (this.id.indexOf('item') != -1) { for (var z=0; z<getdd.length; z++) { if (getdd[z].id.indexOf(this.id) !=-1 && getdd[z].className=='') { eNext = getdd[z].firstChild; while (eNext.nodeType!=1) {eNext = eNext.nextSibling;} ulHeight = eNext.offsetHeight; expand (0,ulHeight,getdd[z].id) } else { eNext = getdd[z].firstChild; while (eNext.nodeType!=1) {eNext = eNext.nextSibling;} ulHeight = eNext.offsetHeight; if (getdd[z].offsetHeight > 0) { contract (ulHeight,0,getdd[z].id) } } if (getdd[z].id.indexOf(this.id) !=-1 && getdd[z].className=='') { getdd[z].className='selected'; this.className='slide'; } else { getdd[z].className=''; ePrevious = getdd[z].previousSibling; while (ePrevious.nodeType!=1) {ePrevious = ePrevious.previousSibling;} ePrevious .className=''; } } } } } function expand (cY, fY, subY) { cY=cY+2;; if (cY <= fY) { document.getElementById(subY).style.height = cY + "px"; setTimeout ("expand("+cY+","+fY+",'"+subY+"')", 5); } } function contract (cZ, fZ, subZ) { cZ=cZ-2; if (cZ >= fZ) { document.getElementById(subZ).style.height = cZ + "px"; setTimeout ("contract("+cZ+","+fZ+",'"+subZ+"')", 5); } } </SCRIPT> <!-- fine cod JAVASCRIPT -->

Naturalmente, bisogna personalizzarlo.
Trovate il blocco di codice sotto e personalizzate le scritte in rosso:

<dt id="item1" class="">Prima Categoria</dt>
<dd id="sitem1" style="height: 0px;" class="">
<ul>
<li><a href="inserire qui il link">Primo link</a></li>
<li><a href="inserire qui il link">Secondo link</a></li>
<li><a href="inserire qui il link">Terzo link</a></li>
</ul>
</dd>
<dt id="item2" class="">Seconda Categoria</dt>
<dd id="sitem2" class="" style="height: 0px;">
<ul>
<li><a href="inserire qui il link">Primo link</a></li>
<li><a href="inserire qui il link">Secondo link</a></li>
<li><a href="inserire qui il link">Terzo link</a></li>
</ul>
</dd>

Potete aggiungere tutte le categorie che volete, personalizzando l'identificatore del blocco codice(vedi nel essempio le scritte in blu) e aumentando il numero (esempio: item 3 e sitem 3 - item 4 e sitem 4 - item 5 e sitem 5 - e cosi via

<dt id="item1" class="">Nome Categoria</dt>
<dd id="sitem1" style="height: 0px;" class="">
<ul>
<li><a href="inserire qui il link">Nome</a></li>
<li><a href="inserire qui il link">Nome</a></li>
<li><a href="inserire qui il link">Nome</a></li>
</ul>
</dd>

Dopo aver fatto tutte le prove e tutte le modifiche, quando siete soddisfatti,
salvate tutto ed Enjoy your Accordion Menu.

Articoli correlati per categorie

 Abbonati gratis a questo blog      

Torna Su