Come creare un Menu espandibile da inserire in una sidebar di un blog situato su qualsiasi piattaforma.

Ormai mi sto specializzando in Menù ! Dopo aver presentato il Menù Laterale Scorrevole e il Menù verticale a tendina ecco che siamo arrivati al Menù espandibile da inserire in una sidebar.
Sono un appassionato di cucina e amo cucinare soprattutto piatti sperimentali quindi questa attrazione per i menù era oserei dire naturale. Quello che vado a presentare ovviamente non l’ho creato di sana pianta ma mi sono appoggiato ad una realizzazione trovata su Dynamic Drive. Credo che sia difficile trovarne uno più completo e al quale si possano automaticamente aggiungere delle voci semplicemente modificando un link di un gadget.
Per prima cosa personalizzate questo codice che vado di seguito ad incollare


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/script-menu/ddaccordion.js' type='text/javascript'>
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Localized in italian by Parsifal32 - www.ideepercomputeredinternet.com
***********************************************/
</script>
<script type='text/javascript'>
ddaccordion.init({
    headerclass: &quot;expandable&quot;, //Shared CSS class name of headers group that are expandable
    contentclass: &quot;categoryitems&quot;, //Shared CSS class name of contents group
    revealtype: &quot;click&quot;, //Reveal content when user clicks or onmouseover the header? Valid value: &quot;click&quot;, &quot;clickgo&quot;, or &quot;mouseover&quot;
    mouseoverdelay: 200, //if revealtype=&quot;mouseover&quot;, set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: [&quot;&quot;, &quot;openheader&quot;], //Two CSS classes to be applied to the header when it&#39;s collapsed and expanded, respectively [&quot;class1&quot;, &quot;class2&quot;]
    togglehtml: [&quot;prefix&quot;, &quot;&quot;, &quot;&quot;], //Additional HTML added to the header when it&#39;s collapsed and expanded, respectively  [&quot;position&quot;, &quot;html1&quot;, &quot;html2&quot;] (see docs)
    animatespeed: &quot;fast&quot;, //speed of animation: integer in milliseconds (ie: 200), or keywords &quot;fast&quot;, &quot;normal&quot;, or &quot;slow&quot;
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})
</script>
<noscript><a href='http://www.ideepercomputeredinternet.com' target='_blank'><span style='font-size: x-small;'>Ad Menu</span></a></noscript>
<style type='text/css'>
.arrowlistmenu{
width: 350px; /*width of accordion menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background:#940F04 url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it&#39;s expanded*/
background-image: url(titlebar-active.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #940F04;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #800080;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #800080;
background-color: #FDBCB7;
}
</style>


La personalizzazione  riguarda soprattutto

1. la larghezza, 350 pixel
2. La dimensione dei caratteri, 14 pixel
3. Il colore del menù #940F04
4. Il colore del link visitato #800080
5. Il colore di background del menù quando si punta con il mouse #FDBCB7

Volendo si potrebbero fare anche altre personalizzazioni che non posso elencare tutte che riguardano margini, colore del testo del menù principale (white), ecc.
Bisognava caricare un file di tipo Javascript nel web ed inserirne l’URL nella seconda riga del codice, ma questo l’ho già fatto io, quindi se volete adottare questo Menù avrete il lavoro semplificato.
Il file di testo con tutto il codice l’ho comunque caricato sul web in questa pagina, mentre il file ddaccordion.js volendo lo potete scaricare in formato txt, nel caso vogliate avere tutti i file caricati nelle vostre cartelle. Dopo averlo caricato inseritene l’URL al posto di http://is.gd/1Fb6J. Questo paragrafo in corsivo è da considerarsi come un inciso solo per i più smanettoni. Chi non lo è lo salti tranquillamente.
Andate su Layout > Modifica HTML e, dopo aver scaricato un modello completo e messo la spunta a espandi modelli widget, cercate la riga di codice </head> e, immediatamente sopra incollate tutto il codice personalizzato come in questo screenshot
 

Salvate il modello. Adesso dovete creare il menù vero e proprio cioè dovete inserire i vostri nomi principali, collegamenti secondari e URL. Ecco un esempio di come potrebbe essere un menù


<div class="arrowlistmenu">
<h3 class="menuheader expandable">RISORSE PER BLOGGER</h3>
<ul class="categoryitems">
<li><a href="http://www.ideepercomputeredinternet.com/">HOME</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2008/12/come-creare-un-blog-con-pochi-click.html" target="_blank">Creare un blog in 2 minuti</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2008/12/come-iniziare-un-blog-e-cosa-fare-nel.html" target="_blank">Cosa fare nel primo mese</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/02/le-55-cose-da-sapere-per-creare-gestire.html" target="_blank">100 risorse per Blogger</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/07/altre-16-risorse-per-blog-su-blogger.html" target="_blank">Altre risorse per Blogger</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/01/la-pi-grande-collezione-di-template-e.html" target="_blank">Collezione di modelli per Blogger</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/06/tutto-quello-che-serve-sapere-per.html" target="_blank">Guadagnare con un blog</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/07/come-crearsi-una-rendita-mensile-di.html" target="_blank">Come crearsi una rendita di 1000€ al mese</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/03/le-migliori-estensioni-add-on-per.html" target="_blank">65 estensioni per Firefox</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/05/sprintrade-per-guadagnare-di-piu-con-il.html" target="_blank">Guadagnare con Sprintrade</a></li>
</ul>
<h3 class="menuheader expandable">EROS INCONTRI VIDEOCHAT GIOCHI</h3>
<ul class="categoryitems">
<li><a href="http://videoblog32.blogspot.com/" target="_blank">VIDEOCHAT GRATIS</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2008/10/ciaoamigos-la-videochat-pi-frequentata.html" target="_blank">Ciao Amigos Videochat</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/search/label/videochat" target="_blank">Tutte le videochat del mondo</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2008/01/ecco-dove-puoi-trovare-amicizia-amore-e.html" target="_blank">INCONTRI & EROS</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2008/01/gioca-gratis-piu-di-dodicimila-giochi.html" target="_blank">12.000 giochi gratis online</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/04/friv-per-giocare-gratis-online-piu-di.html" target="_blank">FRIV per giochi gratis</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/search/label/giochi" target="_blank">Per giocare e scaricare videogames</a></li>
</ul>
<h3 class="menuheader expandable">TELEVISIONI FILM</h3>
<ul class="categoryitems">         <li><a href="http://live-streamingtv.blogspot.com/" target="_blank">Tutte le televisioni in streaming</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2008/09/vedere-le-partite-del-campionato.html" target="_blank">MYP2P per lo sport gratis</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/03/worldlive-tv-per-vedere-gratis-partite.html" target="_blank">WorldLive TV per TV P2P</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2008/09/vedere-le-partite-del-campionato.html" target="_blank">Calcio gratis</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/search/label/televisione" target="_blank">Tutto sulle televisioni</a></li>
</ul>
<h3 class="menuheader expandable">DOVE PUOI TROVARMI - PRIVACY</h3>
<ul class="categoryitems">
<li><a href="http://www.blogger.com/profile/03393759575661143644" target="_blank">PROFILO SU BLOGGER</a></li>
<li><a href="http://it-it.facebook.com/parsifal32" target="_blank">Aggiungimi su FACEBOOK</a></li>
<li><a href="http://twitter.com/parsifal32" target="_blank">Seguimi su TWITTER</a></li>
<li><a href="http://friendfeed.com/parsifal32" target="_blank">Seguimi su FRIENDFEED</a></li>
<li><a href="http://parsifal32.stumbleupon.com/" target="_blank">Aggiungimi su STUMBLEUPON</a></li>
<li><a href="http://www.youtube.com/user/parsifal32" target="_blank">Il mio canale su YOUTUBE</a></li>
<li><a href="http://parsifal32.tumblr.com/" target="_blank">Stupidaggini su TUMBLR</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2008/01/messaggi-dei-lettori.html" target="_blank">Modulo per contattarmi</a></li>
<li><a href="http://www.ideepercomputeredinternet.com/2009/03/tutti-i-blogger-che-usano-adsense-sono.html" target="_blank">Norme sulla PRIVACY</a></li>
</ul></div>


Questo è il menù che ho inserito al momento, non è detto che non lo modifichi con l’andare del tempo, anzi sicuramente lo farò. Ecco come personalizzarlo alle esigenze del proprio blog

1. L’espressione target=”_blank” l’ho inserita in tutti i collegamenti escluso quello con la homepage e significa l’apertura del link in un’altra pagina
2. Le espressioni colorate di viola sono le voci principali del menù e sono quelle che si visualizzano sempre. P.e. RISORSE PER BLOGGER
3. Le espressioni colorate di azzurro sono le voci secondarie di ogni singola voce principale e sono messe sotto forma di elenco
4. Ad ogni voce secondaria corrisponde l’URL di collegamento colorato di rosso
5. Si possono aggiungere altre voci principali o altre voci secondarie mantenendo inalterata la sintassi.

Quando si è creato il nostro menù, si salva in un file di testo, quindi si va su Layout > Aggiungi un Gadget > HTML/Javascript e si incolla, quindi si Salva l’elemento senza inserire il Titolo, in quanto pleonastico.
Il Menù è concepito in modo tale che se si clicca su una Voce Principale, si aprono le Voci Secondarie che sono al suo interno con i vari collegamenti a sezioni o articoli del nostro blog

Se si clicca su un’altra voce principale automaticamente si apre e contemporaneamente si chiude quella che era aperta. Il sistema è tale da avere anche decine di collegamenti in uno spazio relativamente piccolo. La prima volta che si installerà il menù dovrà passare qualche secondo affinché gli script vengano caricati, quindi prima di cliccarci sopra per vedere se funziona aspettate un po’.
Se si ha un blog in un’altra piattaforma quello che cambia è solo il modo di inserimento del menù nella sidebar mentre il tag </head> per l’inserimento degli script e dei fogli di stile è ovviamente presente in tutte le pagine web. Un’aggiunta di questo tipo è indubbiamente un aiuto alla navigabilità del sito e un modo per catturare meglio l’attenzione dei visitatori occasionali.