Simple and Clean Menus with jQuery

Creating a nice-looking menu can be a challenge. You want something that’s clean, that looks good, and that fits into your site. These aren’t such demanding things to ask for in a menu, but if you search the Internet for “html menu”, you get all sorts of strange selections, varying in degrees of complexity, and usually designed for a specific site layout or color scheme.

What if you could have a very recognizable menu system – like the one that Windows Explorer™ uses, shown here?

Thanks to jQuery and its multitude of useful plug-ins, you can have just that. The SimpleTree plug-in takes only seconds to create a menu system that nearly every computer user will immediately recognize and feel comfortable with. What’s shown below is the default icon theme that the plug-in includes, but you can always edit or replace the images to change the computer icon, the folder icons, or the “leaf” icons to suit your needs.

If you’re not familiar with jQuery, see some of our previous posts on the topic:
http://www.westhost.com/blog/2009/01/dynamic-websites-with-jquery-and-extjs/
http://www.westhost.com/blog/2009/03/more-jquery-blockui-plug-in/

Check out our simple menu below, or the complete example: http://cmichaelis.whsites.net/whblog/jquery-simpletree/

In order to create this menu, we need only a small bit of JavaScript code, placed in your jQuery “ready” function:

simpleTreeCollection = $('.simpleTree').simpleTree({
autoclose: true,
afterClick:function(node){
$.blockUI({ message: 'You clicked on:<br/ >' + $('span:first',node).text() + '<br /><br /><a href="javascript:void(0)" onclick="$.unblockUI()">Click here to dismiss.</a>'});
},
animate:true,
drag:false
});


We also need to define the menu items themselves. This will be done with an unordered list (ul) element which has the class “simpleTree”:


<ul id="browser" class="simpleTree">
<li class="root"><span>Contents</span>
<ul>
<li class="open" id="item1"><span>This is the first item...</span>
<ul>
<li id="subitem1"><span>Sub Item #1</span></li>
<li id="subitem2"><span>Sub Item #2</span></li>
</ul>
</li>


<li class="open" id="item2"><span>This is the second item...</span>
<ul>
<li id="subitem3"><span>Sub Item #3</span></li>
<li id="subitem4"><span>Sub Item #4</span></li>
</ul>
</li>
</ul>


When your jQuery ready event runs, it will convert the unordered list into the menu. That’s all there is to it!