CSS Drop Down Menu System

I have spent the afternoon working on revising a CSS menu system. Having got it working, and with multiple level dropping down, I was actually amazed at just how easy it was to do. Why am I excited about this? Because it works in pretty much all legacy browsers, and does not require scripting. If you look at typical drop down menus, they tend to require javascript support, which is certainly common, but is not universal. A CSS based menu means that all your users will get the same experience.

So why am I so bothered if a well designed javascript based system is designed to degrade gracefully and still allow navigation? Simple reason is to make my life easier. If I know that every user will get exactly the same experience, I don’t need to design multiple ways through the site, or redundant navigation.

I guess that the other thing to explain is why we are doing this. I have recently done some user testing on one of the sites I manage and found that none of the users saw the 2nd level of horizontal navigation we have. I know that this second level is used but my feeling is it is used by people who know our site, although I am yet to test this.

The second reason for looking at this multiple level navigation is that if you focus on your user, under your product or services menu, you should have various methods of a visitor finding the content they are looking for. What do I mean? Our products are enclosures, metal boxes basically, people may want to find them by material, application, size, industry etc. Using 3 level navigation you can easily push them to the content they want and reduce the number of steps they have to take to get to their content.

Having said that I intend to test this navigation on our site and see if or user like it. I will report back then.

2 thoughts on “CSS Drop Down Menu System”

  1. Hey Mate, have you checked it in IE6?

    I’ve found that in general IE6 still requires Javascript for it to work correctly, and unfortunately there are too many people still using it to not worry about it.

    If you’ve figured out a way to do it in IE6 soleley with CSS, I would love to know about it!

  2. Thanks for the comment. I have been pulled off it for the moment, but did have it ‘sort of’ working in IE6. It needs some tightening up but I will let you know when I have it sorted out.

Leave a Reply

Your email address will not be published. Required fields are marked *