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!
5 Comments so far
Leave a reply
Great write up Chris!
I looked at the WH forums for info on installing jQuery and could not find anything. Does WH include jQuery as part of the JRE installation? If not is there a good tutorial you may provide to show others how to install jQuery on their WH VPS?
Carlos
Inspirational material. Thanks for this, I will point a few colleagues to this page.
Hi Carlos,
Since jQuery is just a JavaScript library, there’s nothing really to install. The JRE is a separate thing entirely – although they are very similar in name, JavaScript (the language jQuery is written in) and Java (for which JRE is the runtime environment) are separate languages. They share some similarities, but are pretty heavily different.
Installing jQuery can be done by downloading http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js and saving it along with the .html or .php files for your website. You would then reference it in your page by adding a script tag in the head section of your web page, like this:
<html>
…
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
</head>
…
</html>
Be sure to end the script tag with </script> or some browsers – most notably Internet Explorer – will just show a blank page when visiting your site.
I hope that helps!
–Chris
Just a minor clarification:
If you use the “googlecode” path, you don’t even have to download jQuery! Google hosts jQuery on their network of datacenters, so no matter where the client is, they are likely to get a closer (faster) connect to jQuery than if you host it yourself (e.g. on WestHost). For more “convincing” check out:
http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/
You can also use Google’s AJAX APIs to access their hosted jQuery — find out how at:
http://code.google.com/apis/ajax/documentation/
http://code.google.com/apis/ajaxlibs/
In a nutshell:
//
Advantage of doing it this way? Here’s a discussion: http://stackoverflow.com/questions/208869/what-are-advantages-of-using-google-loadjquery-vs-direct-inclusion-of-ho