Creating Fancy Drop Down Menus With Pure CSS

March 13, 2012

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!

Post Discussion


Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like…

My Experience Upgrading to Windows 11

My Experience Upgrading to Windows 11

When Windows 10 was released, we were told it would be the last version of Windows. Several years passed and that was the case. Then we got Windows 11 and it did have some changes about what machines were supported. So we weren't talking about...

Read More

IDrive Cloud Backup

Use IDrive to Safely Backup Your Data to the Cloud

I truly hope everyone knows the importance of backup and you have plans in place to backup your data on a regular basis. Sadly I realize that while everyone claims they should do it, you might not do it often enough or maybe not at all. Today...

Read More

Foster D. Coburn III

Foster D. Coburn III is author of 13 best-selling books on CorelDRAW and has been a contributor to numerous technology and graphics-related magazines. Foster has taken many projects, including this Web site, from the early design stage through to a finished piece. He has been a featured speaker at many graphics conferences. His first Web site was built in 1995 and he has been working exclusively in WordPress since 2013.

Recent Posts

Pro WordPress Help

WordPress Web design

Graphics Unleashed Donations

Personal Info

Donation Total: $5