jQuery: breadcrumb espandibili

I breadcrumb realizzati con i CSS tendono ad espandersi in larghezza man mano che la gerarchia del sito diviene più complessa. Alla fine le voci del menu andranno a capo, rovinando il layout. Con jQuery possiamo gestire i breadcrumb in modo più intelligente: invece che mostrare sempre tutte le voci, mostreremo solo la prima e daremo all'utente la possibilità di visualizzare le altre voci cliccando su un'icona o un separatore. In questo modo non avremo più breadcrumb che si estendono su più righe. Vediamo come.

La soluzione che presento in questo articolo è unidirezionale, nel senso che mostra solo le voci ma non prevede l'azione opposta. Tuttavia è abbastanza semplice effettuare l'operazione inversa con jQuery.

Iniziamo dall'HTML:


<div id="breadcrumbs">
	<a href="#">Home</a><span class="sep"></span>
	<a href="#">Articoli</a><span class="sep"></span>
	<strong>Titolo articolo</strong>
</div>

Questa struttura non è semantica, ma per esperienza posso dire che è sicuramente la più diffusa. Noterete come l'elemento vuoto funge da separatore. Ecco gli stili CSS:


#breadcrumbs {
	height: 1.2em;
}

#breadcrumbs a,
#breadcrumbs strong {
	float: left;
	height: 100%;
	line-height: 1.2;
}

#breadcrumbs span.sep {
	width: 4px;
	height: 100%;
	float: left;
	margin: 0 1em 0 0.5em;
	background: url(arrow-off.gif) no-repeat 0 50%;
	cursor: pointer;
}

#breadcrumbs span.sep:hover {
	background: url(arrow-on.gif) no-repeat 0 50%;
}

Con jQuery dobbiamo associare un'azione a ciascun elemento separatore dopo aver nascosto tutte le voci ad eccezione del primo link e del primo separatore:


$(function() {

	$('#breadcrumbs').children().
	not('a:first, span.sep:first').
	hide();
	
	$('span.sep', '#breadcrumbs').click(function() {
	
		var $span = $(this);
		
		var sibling = ($span.next().is('a')) ? $span.nextAll('a, span')  : $span.next('strong');
		
		
		sibling.show(500);
	
	
	});

});

Il costrutto ternario significa: se l'elemento che segue è un link, allora seleziona sia il link che il separatore che seguono, altrimenti seleziona solo l'elemento strong (ultimo elemento del menu, ossia la voce corrente):


var sibling = ($span.next().is('a')) ? $span.nextAll('a, span')  : $span.next('strong');

Per effettuare l'operazione inversa dovete sempre usare l'evento click sul separatore, ma al contrario, ossia:

  1. verificate che il separatore e il link correnti siano visible o hidden tramite is()
  2. usate hide() o show() a seconda dei casi

In pratica, il principio è lo stesso di quello usato negli accordion.

Potete visionare l'esempio finale in questa pagina.

Torna su