To see it in action, visit: www.montrose-partnership.com

Carried out for a West London based design agency, this job entailed taking a psd design and bringing it to life via XHTML/CSS and the wonderful jQuery JavaScript library. The vertical menu is set to stay in place while the content area to the right changes to reflect whatever the user chooses to click on.

jQuery’s chaining ability is put to thorough use as each menu link sets off a series of events; the menu itself – inc. child elements – expands and contracts, and the content area is repopulated. The following picture illustrates what happens when a specific wedding ring is clicked. The content area changes to a large ring with a column of thumbnail rings situated to the side. The thumbs can be navigated with arrows and clicked to expand and fill up the content area. Again, this is all performed using jQuery.

CSS sprites were implemented for the menu’s hover states, however, the selected ‘active’ state is actioned using jQuery. Here’s one of the sprites:

All in all, an interesting exercise in the uses of CSS and jQuery, which indeed makes for clean uncomplicated code.

We have a horizontal menu with a fitting ID of ‘menu’, nestled in a ‘content’ DIV. Within the menu there’s a DIV named ‘service-options’ which is a sub menu of ‘services’. Unordered list ‘service-options’ is hidden and only drops down upon clicking the ‘services’ link. Now for the JavaScript:

<script type="text/javascript">
$(document).ready(function() {
// hides the sub menu as soon as the DOM is ready, just before page load)
$('#service-options').hide();
// shows sub menu, service-options, when clicking the 'services' link
$('a#show').click(function() {
$('#service-options').toggle('slow');
return false;
});
});
</script>

Looking at the JavaScript, as soon as the DOM’s ready (once the browser’s reviewed the HTML), the ‘service-options’
ul is hidden using jQuery’s .hide() method. Next, an event handler is assigned to the ‘services’ link which has an ID of ‘#show’. $(‘#service-options’).toggle(‘slow’) attachs the ‘toggle’ method to the sub menu; this toggles it between two states, hidden and not hidden (not hidden being jQuery’s show() method). Incidentally, $(‘#service-options’) is jQuery’s method of selecting an element. That’s it, the event has been assigned to the ‘services’ link ready to toggle the sub menu in and out of view.

Download the file to play around with the script. Of course, you’ll need the jQuery library.