Menù orizzontale o verticale con immagini e effetto slide (Accordion JQuery).

Vado a presentare un nuovo menù un po' diverso dal solito che ha nella grafica la sua maggiore attrattiva. Per avere quindi un buon effetto occorre che le immagini inserite nel menù siano particolarmente curate. Occorre anche avere un modello che non inserisca in modo automatico dei bordi intorno alle stesse immagini, altrimenti l'estetica ne potrebbe risentire. Ho messo in rete un esempio di come potrebbe essere l'aspetto di questo menù. Ho utilizzato immagini in formato PNG con sfondo trasparente ma forse sono da preferire le immagini in JPG senza trasparenze.

• Demo Menù Orizzontale e Verticale Accordion -

Si va su Design > Modifica HTML e si salva il template. Si espandono i modelli widget e si cerca la riga </head>. Subito sopra si incolla il codice

<!--Menù Accordion Inizio-->
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/accordion1.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/accordion2.js' type='text/javascript'/>
<style type='text/css'>#blAcordeeJTE{width: 178px;overflow: hidden;padding: 0;position: relative;margin: 0px auto;list-style-type: none;border-top:none;}#blAcordeJTE {width: 640px; overflow: hidden;padding: 0;position: relative;margin: 0px auto; border:2px solid #cccccc; list-style-type: none;border-left:none;}ul.bljj1 li{border-left: 2px solid #CCCCCC;}ul.bljj2 li{}ul.blAcordeeJTE a li, div.blAcordeeJTE a div{border-left: none;}</style>
<!--Menù Accordion Fine - www.ideepercomputeredinternet.com-->

In cui si possono personalizzare la dimensione e lo stile dei bordi. Questo però è meglio farlo in un secondo tempo. Adesso cercate la riga </body> e immediatamente sopra incollate quest'altro codice

<script type='text/javascript'>
window.addEvent(&#39;load&#39;, function(){
var slideMenu = new blAcordeJTE();
var blAcordeeJTE = new blAcordeJTE(&#39;blAcordeeJTE&#39;, {vertical: true});
});
</script>
<noscript><a href='http://goo.gl/53iXN' target='_blank'><span style='font-size: x-small;'>Accordion Menu</span></a></noscript>

Salvate il modello. Avete bisogno di immagini della grandezza approssimativa di 180x250 pixel a cui deve essere aggiunta una scritta laterale oppure nella parte alta da essere interpretata come voce del menù

                 

Ecco due esempi realizzati decisamente male da me visto che ho scarsissimo talento per la grafica. Le immagini come la prima possono essere usate per un menù orizzontale mentre quelle come la seconda per un menù verticale. Dopo aver caricato le immagini su Picasa, SkyDrive o DropBox si passa alla realizzazione del menù che dovrà avere questa struttura

Menù Orizzontale

<ul class="bljj1" id="blAcordeJTE">
<li class="first"><a href="URL COLLEGAMENTO"><img src="URL IMMAGINE" /></a></li>
<li><a href="URL COLLEGAMENTO"><img src="URL IMMAGINE" /></a></li>
<li><a href="URL COLLEGAMENTO"><img src="URL IMMAGINE" /></a></li>
<li><a href="URL COLLEGAMENTO"><img src="URL IMMAGINE" /></a></li>
</ul>

Menù Verticale

<ul class="bljj2" id="blAcordeeJTE" style="width: 178px;">
<li class="first"><a href="URL COLLEGAMENTO"><img src="URL IMMAGINE" /></a></li>
<li><a href="URL COLLEGAMENTO"><img src="URL IMMAGINE" /></a></li>
<li><a href="URL COLLEGAMENTO"><img src="URL IMMAGINE" /></a></li>
<li><a href="URL COLLEGAMENTO"><img src="URL IMMAGINE" /></a></li>
</ul>

Dove dovranno essere inseriti l'indirizzo della pagina collegata e quello della immagine secondo una sintassi che potrebbe essere come questa

<li><a href="http://www.ideepercomputeredinternet.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD5h1yenuaVthbCs8DlzjU-6TAtLSscC-LUvFby4zTmk6yGQ8-HE5PuxIxtUXGOLl0JiqzKXOVhyphenhyphengM2Lj7tZ1bZFzTx27OAOdXZqAwYC-blImU0Mahm_saM7Chx-p28CBKucFVmEDiHcs/" alt="Moda" /></a></li>

in cui ho anche inserito il tag Alt per ragioni SEO. Si possono inserire tutte le immagini che si vogliono ricalibrando le dimensioni. Il codice così ottenuto si incolla su Design > Aggiungi un gadget > HTML/Javascript. Il menù si apre con un effetto in stile fisarmonica

Fonti|  MooTools - Blogspot Vision - El Balcon -