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.
Tags: css, javascript, jquery, psd to html, user interface, xhtml
