Home | About Chris Hope | Contact Chris Hope | Search:

Kidzstuff reskinned and uses jQuery Superfish Menus plug-in

Posted September 4th, 2009 in Case Studies and Javascript

I've reskinned the Kidzstuff website again (this is the 4th different design I've used now) and am much happier with the result this time. (A screenshot of the version 3 design can be seen here and the versions 1 and 2 here). This new design utilises the jQuery Superfish Menus plug-in which is the main purpose of this post.

Screenshot

The screenshot below shows the Superfish menu in action with the "Directory" section opened up and showing two levels of menus.

The Superfish Plugin

The Superfish plugin is really easy to implement. All that is needed is an unordered list with the sf-menu class and then a Javascript call to get it running. I store the full menu as a Javascript variable in an external file so it can be cached instead of having to be included in the HTML on each page request.

Read more about how I do this in my post about caching the menu, more about the Superfish plugin in general, visit the Kidzstuff website itself to see it in action, download the plug-in and go to the Superfish website for more examples and documentation.

In an upcoming post I'll show how easy it is to change the colors etc of the menu and we'll shortly be launching the new version of the healthy.co.nz website which also uses this plug-in but with the top level of the menu vertical instead of horizontal.

Comments

blog comments powered by Disqus