Tag Archives: easing

accordion menu con jQuery

Con estrema lentezza visti i vari impegni – scusa Nicola – sto lavorando ad un progetto freelance; per le tematiche relative all’interaction design ho pensato di usare jQuery mentre il markup è rigorosamente sviluppato in xHTML strict; il tempo non è molto e mi son detto: voglio usare quanti più plugin riesco, voglio vedere quanto è vero stò motto “write less, do more”, e quanto riesco a customizzarli in base alle mie esigenze.

Ma veniamo al perchè di questo post: nel mentre sviluppavo il mio design già pensavo ad un simpatico menu di tipo “a soffietto” o accordion, per dirla in inglese, che suona meglio.
Ed ho deciso di condividere con voi tale idea anticipandovi che comunque ci sono già buoni tutorial e plugin sull’argomento ma nessuno, non capisco perchè, parte da un set di liste non-ordinate annidate.
Questo è il nostro markup: molto semplice. Ricordiamoci di dare un ID alla lista.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul id="prjcats">
	<li><a href="#">Henseleit Helicopters</a>
		<ul>
			<li><a href="#">MP V91 XL</a></li>
			<li><a href="#">MP XLE</a></li>
		</ul>
	</li>
	<li><a href="#">Mikado Model Helicopters</a>
		<ul>
			<li><a href="#">V Stabi 3 Axis</a></li>
			<li><a href="#">Logo 500DX</a></li>
			<li><a href="#">Logo 500 3D</a></li>
		</ul>
	</li>
	<li><a href="#">Thunder Tiger</a>
		<ul>
			<li><a href="#">A109 Scale Fuselage Kit</a></li>
			<!-- eccetera -->
		</ul>
	</li>
</ul>

Ora passiamo allo script che ce la trasforma in un accordion menu con effetto easing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
  $("ul#prjcats li ul").hide();
  $("ul#prjcats>li>a").click(function() {
  	$(this).addClass("current");
  	var $subnav = $(this).next();
		if($subnav.is(":visible")) {
		$subnav.animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
		}
		if(!$subnav.is(":visible")) {
		$("ul#prjcats li ul:visible").animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
		$subnav.animate({height: "toggle"}, 750, "easeInOutExpo");
		}
		return false;
	});
});

E questo è il nostro script jQuery. Ricordiamoci di includere il framework stesso e il plugin jquery.easing

1
2
<script type="text/javascript" src="../js/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.2.js"></script>

Ora vediamo nello specifico cosa fà questo script:
Per prima cosa nascondiamo tutte le liste annidate.

1
$("ul#prjcats li ul").hide();

Al click dei link di primo livello – notare la sintassi “>”

1
$("ul#prjcats>li>a").click(function();

aggiungiamo una classe .current (il colore rosso di selezione) e assegnamo alla variabile $subnav le liste di secondo livello.
.next() trova il primo elemento “discendente” di A: appunto una lista UL

1
2
$(this).addClass("current");
var $subnav = $(this).next();

Qui controlliamo se $subnav è visibile – cioè aperto; se lo è usiamo toggle per switchare tra lo stato di visibile o invisibile. Se é “.is” visibile, chiudi la sub-lista.
Per l’animazione usiamo un tempo “750″- millesimi – ed un metodo easing “easeInOutExpo”. Risaliamo con .prev() ad A e gli togliamo la classe di selezione.
Nota sugli effetti easing: sono 30 e potete giocherellare con i vari metodi di cui trovate un elenco qui. Provate l’effetto che più vi piace. E un’ulteriore nota: gli effetti si fanno apprezzare su liste con molti elementi; se le vostre liste sono corte, evitate effetti di accelerazione/rimbalzo.

1
2
3
if($subnav.is(":visible")) {
	$subnav.animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
}

Qui invece controlliamo se $subnav selezionato non è visibile – è chiuso – e se lo è, prima controlliamo se qualcun altro è aperto “”ul#prjcats li ul:visible”” e lo chiudiamo, e poi apriamo il $subnav selezionato.

1
2
3
4
if(!$subnav.is(":visible")) {
$("ul#prjcats li ul:visible").animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
$subnav.animate({height: "toggle"}, 750, "easeInOutExpo");
}

Dopo gli if, usiamo “return false;” per evitare che al click dei link di primo livello, che sono vuoti “#”, si verifichi il balzo verso l’alto della pagina.

1
return false;

Ed ecco fatto, accordion menu con effetto easing.

jQuery easing plugin

Vi ricordate le famose ‘easing equations’ di Robert Penner, che diedero il via ad un mondo di interfacce – o siti – (in Flash) che si “trasformavano” nelle dimensioni e/o interagivano rimbalzando, dissolvendosi ecc. tramite tutta una serie di algoritmi che ne modificavano lo stato in maniera parametrica? Anche io nel 2004 ero flash addicted e questo ne è un esempio. Un sito, mai terminato, che doveva servire da showcase e tecnicamente rappresentava un buon punto di arrivo per i miei skill con l’ActionScript e appunto con questi effetti di molleggio, dissolvenza etc.

Ricollegandomi al precedente post sugli effetti da applicare a frammenti di codice xHTML (tags) per mezzo di javascript, o meglio per mezzo dell’incredibile e potentissimo jQuery e dei suoi plugin, ecco che oggi dal sito learningjquery.com trovo questo plugin “jQuery Easing” sviluppato da GSGD che mi fa letteralmente sobbalzare sulla sedia non appena provo gli effetti nella pagina d’esempio.

Sono certo che stimolerà la mia fantasia così come lo farà con la vostra.
Enjoy!