Creating Drop-down Menus Using Progressive Enhancement

Considering the dynamic nature of the web today, where engaging JavaScript-based user interfaces and Flash animations are nearly everywhere, it seems that developing web applications that are conceived to work with a minimal set of hardware/software requirements looks like a rather old fashioned approach. Well, I have to say that this is only a misconception. In fact, this approach, commonly known as Progressive Enhancement (PE), is one of the big pillars of modern web design. It allows you to create websites that are much more accessible and usable than average.

It's fair to note, however, that highlighting the benefits provided by PE without showing how to implement it in some realistic use cases is pointless. To tackle this issue, in previous installments of this article series I coded some approachable examples that hopefully demonstrated how to create a few typical web applications, including image galleries, form validators and slide shows, which used PE to maintain their core functionality untouched, even if JavaScript was disabled on the browser.

While the examples showed that it's fairly easy to create accessible web programs by sticking to the schema imposed by PE, there are still many other cases where it's possible to use this approach with notable results. One of those cases is the construction of hierarchical menus whose dynamic behavior is added via JavaScript (remember that this can even be done with behavioral CSS). Assuming that the topic has caught your attention, in this penultimate part of the series I'm going to start building a jQuery-based drop-down menu, which, similar to other examples discussed before, will remain entirely functional even if JavaScript is turned off in the client.

Want to see how this will be accomplished in a few simple steps with PE? Then  begin reading!