Drop down con Javascript

ovvero come realizzare elementi a scomparsa animati

Come ho realizzato il menù a discesa animato qui sopra?
Ok, magari per molti di voi è una banalità, ma sono sicuro che a qualcuno invece interesserà saperlo. Per queste (poche) persone, ecco un breve tutorial.

Innanzitutto ho sfruttato esclusivamente gli standard, mantenendo il mio codice Xhtml pulito e valido, così come il mio Css.
L’interazione è stata realizzata sfruttando alcune (ormai molto note) librerie Javascript gratuite e distribuite sotto licenze di tipo GPL.
In particolare, vi serviranno le librerie di:

• Prototype
• Script.aculo.us
• Behaviour

che potete tranquillamente scaricare dai rispettivi siti web.

Prima di tutto, ora che abbiamo le librerie, includiamole nel nostro documento Html, così:

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js"></script>
<script type="text/javascript" src="/js/behaviour.js"></script>

Ovviamente adattate i percorsi dei file in base alla struttura del vostro sito.Dopodiché, dobbiamo creare i due elementi coinvolti nell’interazione, rispettivamente il link che attiva/disattiva l’animazione e il Div con i contenuti a scomparsa.

Partiamo dal link:

<a id="open" href="javascript:void(0);" >Open</a> 
<a id="close" href="javascript:void(0);" style="display:none;">Close</a> 

E’ importante impostare gli ID degli elementi, ci verrano utili tra poco.
Poi creiamo un Div con i contenuti: Lo chiamiamo contents:

<div id="contents" style="display:none;">
     bla bla bla bla bla bla
</div> 

Ora, normalemente, per associare un comportamento Javascript ad un link si userebbe l’attributo onclick del tag a.
Tuttavia si tratta di un attributo “sporco”, che esula dalle iniziale specifiche html e xhtml, ed è stato introdotto al solo scopo di supportare le funzionalità JS citate, imponendosi come standard de facto.
Giustamente, la specifica Xhtml Strict non lo prevede. Quindi noi non lo useremo.

Qui ci viene in aiuto Behaviour, che ci dà la possibilità di abbinare dei comportamenti (appunto) agli elementi Html utilizzando i selettori Css, attraverso la definizione di regole (rules).In questo caso le nostre regole saranno:

// Rules
var myrules = {
  '#open' : function(element){
    element.onclick = function(){
      var targetDiv = $('contents');
      new Effect.BlindDown(targetDiv,{duration: 0.5});
    }
  },
  '#close : function(element){
    element.onclick = function(){
      var targetDiv = $('contents');
      new Effect.BlindUp(targetDiv,{duration: 0.5});
    }
  }
};

Salviamo questo JS in un file rules.js e includiamolo nel nostro documento Html.

<script type="text/javascript" src="/js/rules.js"></script>

Il codice sfrutta le librerie di Script.aculo.us per gli effetti animati e quella di Prototype per la manipolazione e l’identificazione degli elementi Html.
Delego spiegazioni più approfondite circa il funzionamento di tali librerie ad un altro post, o ai siti dei singoli script.

Ora, Behaviour richiede che venga inserito il seguente codice, affinché le regole scritte in precedenza vengano applicate:

  <script type="text/javascript">
   // <![CDATA[
     // Behaviour Rules per interazine javascript
    Behaviour.register(myrules);
   // ]]>
   </script>

Il mio consiglio è di inserire questo JS alla fine della pagina, subito prima della chiusura del tag body.
A questo punto aprite un browser e testate.
Per fare un favore a me e a voi stessi, non usate Internet Explorer per questo genere di cose. Mai.
Funziona?

Il risultato dovrebbe essere simile al drop down che vedete su questo sito (ovviamente dopo dovrete metterci del vostro e aggiungere un po’ di Css!!).

Beh, è evidente che con queste poche righe di codice potete realizzare effetti molto gradevoli e dare un po’ di pepe alle vostre pagine Html (Flash non è sempre l’unica soluzione…).

—————————
Updated 16.06.2006:
Scarica il sorgente (28k ZIP).

—————————
Updated 20.12.2006:

In molti avete chiesto come fare per inserire più drop-down nella stessa pagina o come fare per avere più link che “comandano” lo stesso drop-down.

Ho fatto una variante dello script originale per coprire entrambe le esigenze.
Spero che vi sia di aiuto.

Scarica il sorgente (28k ZIP).

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.