Building Clean Drop-Down Menus with CSS

(Page 1 of 4 )

Over the course of this instructive three-article series I'm going to walk you through the process of creating an extensible CSS-based drop-down menu that can be easily adapted to work seamlessly with many modern browsers. In addition, the menu in question will offer a high level of customization, so it can be quickly modified to fit your personal requirements.

Introduction

Any seasoned web designer knows that building accessible drop-down menus can be a challenging experience. The creation process is often filled with conflicting issues that must be tackled by following a strict and standard approach. In the old days of the Web (and the current ones, actually), one frequently surfed a large number of web sites that proudly incorporated fancy navigational menus whose driving logic was built around a few JavaScript routines. This sacrifices crucial accessibility, and shows a lack of willpower for sticking to certain web design standards.

Of course, I must admit that I found myself making this mistake in the past, because I thought that accessibility was only an insignificant aspect of a web site. This misconception led me to create some JavaScript-based drop-down menus that didn't degrade gracefully if scripting was disabled on the client. Fortunately, things have changed noticeably from those distant times, and now I'd like to share with you my acquired background in building accessible, highly-standardized drop-down menus for a web site.

So, having said that, you are probably wondering if it is possible to build highly accessible navigational menus using only the capacities offered by CSS. Well, fortunately the answer is yes! Of course, as you might have guessed, the process is still full of browser incompatibilities, mostly because Internet Explorer 6 and below do not provide good support for certain web standards, but in the end, the result might be an accessible drop-down menu which requires some basic structural markup to work, along with a few easy-to-follow CSS styles, and a bit of JavaScript code.

Having already introduced the subject of this series, now let's move on and find out together how to use the functionality of CSS to build accessible drop-down menus. It's going to be an educational journey, trust me!

Next: Building the drop-down menu's structural markup >>
 

More Style Sheets Articles
More By Alejandro Gervasio

Comments On: Building Clean Drop-Down Menus with CSS

· Building standard drop-down menus with CSS is a pretty straightforward task,...    · It doesn't work on IE6 though    · Thanks for the comments, but I guess you didn’t read the entire article, simply...    · hallo,thanks for the article.one question, maybe newbie:the titles of the <a hrefs>...    · Thanks for the comments. You can change the width of the menu by modifying the ul...    · tried the code in ie7 we are developing with ref to mozilla so wanted a solution to...    · You must be doing something wrong, since the menu works fine most browsers,...   >>> Post your comment now!