Creating Fancy Drop Down Menus With Pure CSS

We've faced a variety of issues with the navigation menus on the Graphics Unleashed Web site. We had a wonderful solution for menus that was based on a Flash graphic that loaded the menus via CSS (cascading style sheets). This made it easy to modify the menus while also being optimized for search engines. Unfortunately some users disable Flash on their system. We've even received some fairly nasty e-mails from those users complaining that we didn't have navigation menus. Some users didn't have a choice as they were using Apple products (iPhone, iPod, iPad) that don't support Flash at all. The last issue is that we couldn't use the Flash menus on the Graphics Unleashed Blog because the server that hosts the blog doesn't allow us to upload the Flash graphic.

We've been looking for an alternative solution for a while and didn't want to simply jump on the first thing we saw. Not only did we want the menus to be easy to modify, they also had to be functional to you--the user--and they needed to look good. If you have visited the Graphics Unleashed Blog on the Web site lately, you may want to check it out as we have some new menus. There are a few more changes to make to the blog template, but having menus makes it much easier to navigate. We'll soon be adding these same menus to the Graphics Unleashed Web Site.

Now let's look at the tool we used to create the menus. CSS3 Menu comes in both a free and a paid version. There are limitations with the free version so you'll probably want the paid version if you are truly going to use it in developing for a Web site. You choose the style of menu you want from a large list of provided templates (more templates exist in the paid version). Once you've chosen a template, you can tweak it to get it just right for your needs. It supports top level menus as well as sub menus. All of this is done in a WYSIWYG environment so it is very easy to create great looking menus.

Once the menu is completed, you can have it export all the code needed. This typically involves both HTML code and style sheet code. Of all the menu solutions I've tried before CSS3 Menu, the generated code was lengthy and complex. The great thing about CSS3 Menu is that the style sheet code is very compact as is the HTML code. Once this code was generated, it only took a couple of minutes to add it to the blog template so that the menus would show on every page of the blog.

If you've been looking for a good solution for creating fancy menus for a Web site, you'll definitely want to try CSS3 Menu. It only took me about 30 minutes of playing with the free version before I knew I wanted to pay up and get the full version. A very worthwhile investment!