Dynamic Drop-down Menus: Javascript Progressive Enhancement

If you’re a rather skeptical web designer who’s still reluctant to build your web sites upon the foundations of Progressive Enhancement (PE), then you should reconsider your position. This clever approach will let you add in a step-by-step fashion (hence the term “Progressive”) multiple features to your web pages without having to sacrifice their accessibility.

What’s more, even though the paradigm may seem somewhat intimidating, creating web applications that stick to the model dictated by PE is fairly straightforward process that has to do more with basic common sense than with complex and esoteric principles that are hard to implement in the real world.

To demonstrate the veracity of my statement, in previous parts of this series I created from scratch some simple web programs, such as image galleries, slide shows and form validators, whose core functionality remained intact even when users disabled CSS and JavaScript on their browsers. And if all of these examples still don’t encourage you to get started using PE, in the last tutorial I started constructing a basic drop-down menu, which utilized this approach to working with minimal requirements.

It’s valid to recall, however, that this sample menu is incomplete in its current state. It's still necessary to implement its behavioral layer, so that its sections can expand and shrink in response to “mouseover” and “mouseout” events. That’s exactly what I plan to do in this final episode of the series, so you’ll be able to use the menu’s codebase and tweak it to fit your particular needs.

Are you ready to tackle the last leg of this educational journey on using Progressive Enhancement? Then begin reading right now!