Categorie
Programmazione

Come implementare i menu Accordion con jQueryUI

I menu accordion, cioè a fisarmonica, sono una tendenza molto apprezzata sul Web 2.0. Si tratta di un’interfaccia che per certi versi rappresenta un’evoluzione dei menu a cascata, noti anche come menu drop-down. Molto probabilmente li abbiamo usati moltissime volte senza nemmeno accorgercene, perché il loro utilizzo è semplice e intuitivo. Per farci un’idea del funzionamento di un menu fisarmonica possiamo dare un’occhiata alla demo disponibile sul sito di jQueryUI.

accordion_01

Figura 1 – Accordion con jQuery

Se guardiamo al sorgente dello demo resteremo piacevolmente sorpresi dal fatto che il menu è realizzato semplicemente da una riga di codice, ovvero

$(function() {
  $("#accordion").accordion() ;
});

Una presentazione del menu accordion di questo tipo potrebbe essere definita (scherzosamente) una pubblicità ingannevole. È vero che per implementare il menu con jQueryUI basta la riga scritta qui sopra, ma è anche vero che il 90% del risultato dipende da altri fattori, in particolare dall’organizzazione del codice HTML e dalla stesura del codice CSS. Se proviamo a replicare il codice dell’esempio in locale, senza usare i fogli stile della demo originale, il risultato sarà piuttosto deludente.

Questo vale in generale per tutte le demo che mostrano le potenzialità del menù di tipo accordion. Consideriamo ad esempio un’implementazione ben riuscita del menu a fisarmonica di base, senza troppi fronzoli né funzioni particolari, come questa.

accordion_02

Figura 2 – Accordion orizzontale

anche in questo caso la maggior parte del lavoro sta nel codice CSS: per realizzare un menu di questo tipo dobbiamo mettere in conto parecchio lavoro sulla presentazione e sulla grafica.

Le cose si fanno invece più complicate (anche dal punto di vista jQuery) quando vogliamo gestire il menu catturando l’evento “mouseOver” sugli elementi grafici. Un esempio molto interessante è disponibile qui.

accordion_03

Figura 3 – Accordion a griglia

Prima di illuderci di poter realizzare effetti grafici di questo tipo con solo una riga di codice dobbiamo fare un passo indietro e analizzare il codice markup che vogliamo trasformare nel un menu accordion. Nelle prossime pagine vedremo come eseguire il processo passo passo.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.