Month: February 2008

Suckerfish Dropdowns and CSS Menus


Can you refer me to a tutorial for making CSS-based dropdown menus similar to what’s found on this site?

First of all, I must admit I am not a big fan of dropdown menus. They can be a usability nightmare when not done right, and all too often they mask a poorly developed site architecture.

That said, if you feel the need to incorporate them for your site (or a client insists you do it on their site), there is a right and a wrong way to it.

Make sure the solution you choose uses well-structure HTML markup and lightweight CSS/JavaScript. Secondly, judge the size of your navigation to make sure a dropdown makes sense. If you have 5—7 links, you probably don’t need it. If you have 5—7 site sections that all have 5 or more subsections then it might make sense to incorporate a dropdown menu. Lastly, plan for what will happen if your visitors don’t have JavaScript enabled. Does the menu work with CSS only? Does it work without styles at all?

Probably the best implementation out there is Son of Suckerfish Dropdowns. It’s accessible, lightweight, and works well across modern browsers. It does use a small bit of JavaScript, but that is a necessary evil in order to support older versions of IE/Windows. I’ve used a version of Suckerfish called Superfish as a jQuery plugin with great success (check it out live on the new Summit Hut site).

The cthsu.com site uses a product called “CSS Express Drop-Down Menus” from ProjectSeven. It’s another good implementation aimed specially at single-level CSS dropdown menus.

I hope that helps you. For more on dropdowns and how they affect website user interfaces, read these articles:

Prologue Theme for WordPress

If you like Twitter and the idea that you can easily follow along with what your friends and colleagues are doing all day, you might like the new Prologue WordPress Theme.

The theme skins your blog to look like a set of Twitter updates, and the “what are you doing now?” form for posting an update is conveniently located on the top of the home page.

This setup would be perfect for small groups or distributed teams who want to keep track of each other. You could password-protect the blog if you want to limit who can view the posts. In the same way, you limit those that could post updates by having only registered users be able to post updates.

The Prologue team has already released an update that improves the layout of the updates and includes Gravatar support.

Give it a try on your own by downloading the theme, or open a free WordPress.com account and give it a spin there.