I recall the days when complicated Javascript or Flash programming was required to produce a decent-looking dropdown menu. But these menus were often less reliable, had more errors, and were difficult to customize/use. It was time consuming and slow.

CSS Comes Along

With the advancement of the application of CSS usage, the dropdown menu market slowly evolved. The dependency on Javascript slowly reduced, and there was more emphasis on the CSS, which mean that the customization of the style/design was easier, AND it took less resources and ran faster. Also to note was that with the use of CSS, cross-browser applicability went up as well.

For many different projects, I experimented with all sorts of dropdowns. Sometimes I simply settled for less, as it was just too time-consuming to find the right one, and to test these things after modification was a very lengthy process. I needed to check it on FF, IE, and now IE7 has brought some more concerns…

Today I would like to announce that, as a well-seasoned and experienced web designer/coder, that I have found the best CSS dropdown menu I could find out there which you can find here. I have applied this menu to this new website that I am working on, and it works great on IE6, IE7, and FF2. Here is why I like this CSS dropdown code :

The greatest thing about this CSS dropdown menu code is that it requires no Javascript whatsoever, and is purely XHTML and CSS!!! The most complicated aspect of this code would be the if statements that trigger codes based on browser versions (<!–[if lte IE 6]><table><tr><td><![endif]–> ), and other than that, it is relatively easy to use if you have enough knowledge of CSS and HTML.

The advantages of this code are these :

• As I mentioned - PURELY CSS/HTML. No Javascript required.
• The CSS code is already separated enough to allow you to apply designs easily.
• The CSS code is well-commented so that you do not get lost.
• The CSS code has its own protections in order to ensure it appears the same on IE5.5, IE6, IE7, and FF. There are good hacks done to the code to ensure this. Without these, the width of the <ul>, <li> and <a> elements may be off by the amount of padding depending on the browser, which can cause many problems.
• It allows up to 3 levels of menus. The top menu bar is the initial level, which will drop down vertially a set of menus, and then a 3rd set of menus to the side as a fly-out if you want. In my example I did not use it but at the origianl site, you can find the full menu at action!
• I am vouching for it. You can trust me as a skilled coder who knows what he’s talking about.

Haha, the last one sounded a bit cocky but it is quite true.

I hope this post helped many of you who were looking for a reliable code for CSS dropdown menus.

This entry was posted on Friday, February 16th, 2007 at 9:34 pm and is filed under Software, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.