Creare un menu ad albero con jQuery e CSS è un'operazione che non viene di solito spiegata in dettaglio. Vediamo invece come creare questo menu spiegando in dettaglio i vari passaggi.
Si parte sempre dalla struttura HTML. Useremo delle liste annidate in cui alcune voci contengono una sottolista. Queste voci avranno un link che mostrerà la sottolista una volta che l'utente fa clic su di esso:
<ul id="tree">
<li>
<a href="#">Item</a>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li>
<a href="#">Item</a>
<ul>
<li>
<a href="#">Item</a>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
Quindi si passa ai CSS. Le sottoliste verranno nascoste con display: none. Ciascun link avrà un segno + quando non viene cliccato ed un segno - quando la sottolista verrà mostrata. Useremo jQuery con una classe CSS apposita per questo scopo:
#tree {
margin: 2em 0 0 2em;
width: 20em;
}
#tree > li {
padding-bottom: 3px;
margin-bottom: 0.5em;
border-bottom: 1px solid #ccc;
}
#tree li > a {
color: #000;
text-decoration: none;
}
#tree li > a:before {
content: '+';
padding-right: 4px;
font-weight: bold;
}
#tree li >a.active:before {
content: '-';
padding-right: 4px;
font-weight: bold;
}
#tree li ul {
margin: 0.5em 0 0.5em 2em;
display: none;
}
Con jQuery dobbiamo passare in rassegna tutti i link e se è presente una sottolista useremo il metodo slideToggle() per mostrarla/nasconderla. Quando ciò accadrà, aggiungeremo o rimuoveremo la classe CSS speciale su ciascun link:
var MenuTree = {
collapse: function(element) {
element.slideToggle(600);
},
walk: function() {
$('a', '#tree').each(function() {
var $a = $(this);
var $li = $a.parent();
if ($a.next().is('ul')) {
var $ul = $a.next();
$a.click(function(e) {
e.preventDefault();
MenuTree.collapse($ul);
$a.toggleClass('active');
});
}
});
}
};
MenuTree.walk();