To administer your WestHost account, please enter your
Domain Name or Server Manager Username.

Simple and Clean Menus with jQuery

jQueryCreating 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?

Windows Explorer menus

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/

jQuery menus

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!

This entry was posted in Web site Development and tagged , . Bookmark the permalink. Both comments and trackbacks are currently closed.

5 Comments

  1. Carlos
    Posted May 4, 2009 at 11:40 pm | Permalink

    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

  2. UK Web Hosting Dude
    Posted May 5, 2009 at 4:22 am | Permalink

    Inspirational material. Thanks for this, I will point a few colleagues to this page.

  3. Posted May 5, 2009 at 1:27 pm | Permalink

    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&gt;
    </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

  4. Posted May 6, 2009 at 3:12 pm | Permalink

    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/

  5. Posted May 8, 2009 at 2:35 pm | Permalink

    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

Copyright © 1998–2014, WestHost. All rights reserved.  |  WestHost / Believe in Better Hosting. Privacy Policy