Pubblicato il 18/03/11 - aggiornato il  | 11 commenti :

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.

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ù

       moda fashion           scienza astrofisica

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://lh3.googleusercontent.com/_nT13UtBmmiU/TYNgyFQnwYI/AAAAAAAASdM/DgbcodvHNxM/fashion-hor.png" 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

menù accordion jquery

Fonti|  MooTools - Blogspot Vision - El Balcon -



11 commenti :

  1. ti sei mai chiesto quanti quintali di roba ci sarà ormai sopra 'sta benedetta riga HEAD??

    prima o poi dovrai calcolare il momento flettente se no rischia di cadere tutto
    :))

    RispondiElimina
  2. @Tex Willer
    Ahahahahah C'hai ragione Tex! ma anche la riga < /b:skin > non scherza ^_^

    RispondiElimina
  3. ahahah è vero ^_^ lo avevo visto, mi era piaciuto ma poi me ne sono dimenticata... può essere utile per la sidebar verticale... merci

    RispondiElimina
  4. Ciao Parsifal,
    Grazie per l'ottimo menu! Purtroppo sul mio blog l'effetto accordion non va e le immagini appaiono fisse:

    http://docmanhattan.blogspot.com/

    Sbaglio qualcosa? O il menu verticale fa a cazzotti con qualche altro widget? Help! :)

    RispondiElimina
  5. @Dr.Manhattan E' probabile che sia la seconda che hai detto :)

    RispondiElimina
  6. @Ernesto T.

    Immaginavo. Sarò costretto a farne a meno. A ogni modo grazie mille: oltre che una fonte infinita di dritte sei sempre gentilissimo! :)

    RispondiElimina
  7. Ernesto come posso mettere questo menu verticale... accanto al template non dentro... nello spazio tra il margine iniziale del monitor e il margine in cui inizia il template?

    RispondiElimina
  8. Anche l'accordion andrebbe bene... giusto per sfruttare lo spazio laterale fuori dal template. Però non so dove mettere il codice -.-'

    RispondiElimina
  9. @Soffio di Dea
    Prova a incollare il codice in un gadget HTML/Javascript abbastanza grande, secondo me funziona, poi puoi sempre centrarlo con il solito codice.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy