Creating Drop-down Menus Using Progressive Enhancement
(Page 1 of 4 )
In this penultimate installment of the series, I develop a hierarchical drop-down menu, which will use the capabilities offered by jQuery to expand and contract its subsections. Since the entire building process follows the model imposed by Progressive Enhancement, the menu will be completely functional even though it currently lacks, for reasons that will become obvious, truly “dynamic” behavior.
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!
Next: Review: using Progressive Enhancement when building a slide show >>
More JavaScript Articles
More By Alejandro Gervasio
