How to make a category menu using jQuery UI's Accordion and pure HTML.

Today I'll show you how to make a nested category navigation menu.

It's very lightweight and looks something like this:



We're going to use jQuery UI's Accordion widget to make the categories collapse and expand when necessary and we'll use some clever javascript and HTML markup to make the menu look useful. To see the nested category menu example, follow the link at the end of this post to go to the JSFiddle example.

The HTML

Let's start by working on the HTML.

[sourcecode language="html"]
<div class="categories">
<h3>
<img src="http://i.imgur.com/t5UXT.gif" />
<a href="#">CCTV</a>
_{Circuito Cerrado}
</h3>
<div>
<ul>
<li><a href="#">Control de Asistencia</a></li>
<li><a href="#">Controladores de Accesso</a></li>
<li><a href="#">Controladores de Asistencia</a></li>
<li><a href="#">Chapas Electricas</a></li>
<li><a href="#">Chapas Electromagneticas</a></li>
<li><a href="#">Tarjetas de Proximidad</a></li>
</ul>
</div>
</div>
[/sourcecode]

We use the basic HTML recommended by the jQuery UI official documentation. The only difference here is that we use an img tag for the icon.

Notice that the collection of categories are just list items. This will make things very easy for us if you are using an MVC framework such as MVC3 or Rails. You basically only need a foreach loop to output N amount of list items and you're done. :)

 

The CSS.

Next let's see the CSS. Nothing difficult, just some color style and font choices.

[sourcecode language="css"]
.categories {
width: 400px;
margin:10px;
}

.categories h3 {
color: #4A7171;
font-family: Arial;
font-size: 15px;
font-weight: bold;
margin-top: 14px;
}

.categories h3 img { cursor:pointer;}

.categories sub {
font-size:10px;
margin-bottom:10px;
margin-left:15px;
}

.categories ul { }
.categories ul li {
font-size: 11px;
border-bottom:1px solid gray;
font-family: "Lucida Grande","Trebuchet MS",Verdana,Helvetica,sans-serif;
border-bottom: 1px solid #DDDDDD;
margin-top:5px;
width:179px;
}

.categories ul li a { margin-left:26px; }
.categories ul li a.subcategory { margin-left:3px; }
.categories a:visited { color:#4A7171; text-decoration:none; }
.categories a:hover { color:#4A7171; text-decoration:none; }
.categories a { color:#4A7171; text-decoration:none; }

sub { display:block; }
[/sourcecode]

Pretty easy to follow, right? If not, check the JSFiddle link at the bottom for a live demo of this menu.

 

The Javascript.

Now the actual magic. Let's use jQuery to make this menu actual work.

[sourcecode language="javascript"]
var minusImgUrl = "http://i.imgur.com/t5UXT.gif",
plusImgUrl = "http://i.imgur.com/TThAk.gif";

$('.categories').accordion({
collapsible: true,
changestart: function(event, ui) {
$('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');
ui.newHeader.find("img").attr("src", minusImgUrl);
ui.oldHeader.find("img").attr("src", plusImgUrl);
}
});

$('.categories h3 img').click(function() {
$(this).next().click();
});
[/sourcecode]

So what is this actually doing? Let me explain line by line.

[sourcecode language="javascript"]
var minusImgUrl = "http://i.imgur.com/t5UXT.gif",
plusImgUrl = "http://i.imgur.com/TThAk.gif";
[/sourcecode]

We save a reference to both of the images we need. One for collapsed, one for expanded.

[sourcecode language="javascript"]
$('.categories').accordion({
collapsible: true,
changestart: function(event, ui) {
$('h3 img').attr('src', 'http://i.imgur.com/TThAk.gif');
ui.newHeader.find("img").attr("src", minusImgUrl);
ui.oldHeader.find("img").attr("src", plusImgUrl);
}
});
[/sourcecode]

This is applying the accordion UI widget to the categories class.

Next we set the collapsible property to true. This let's us close all of the categories if we want. Something a user would expect to be able to do.

Next we work with the changestart event. This fires everytime a change starts. Specifically we change the icons of every category pane to a collapsed image, then set the icon to expanded of the newly opened pane, and finally set the recently closed pane to collapsed.

[sourcecode language="javascript"]
$('.categories h3 img').click(function() {
$(this).next().click();
});
[/sourcecode]

This bit of code is very needed. If we click the icon, we need to also fire the event to switch panes. To do this, we invoke the jQuery .next() method which finds the next sibling element and fire the click event. Essentially this makes a "click" on the h3 tag which in turn fires the event we want.

You can find a working demo of this article here, on JSFiddle:

http://jsfiddle.net/dqkZN/48/