JAVASCRIPT

Creating Drop-down Menus Using Progressive Enhancement

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

July 27, 2010

TABLE OF CONTENTS:

Before I start discussing how to use Progressive Enhancement to build the jQuery-based menu mentioned in the introduction, I'd like to spend a few moments reintroducing the example developed in the previous chapter of the series. It demonstrated how to use this approach to create an accessible slide show with the popular jQuery Cycle plug-in.

Here's the source code corresponding to this particular example; pay attention to it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Building a slide show using Progressive Enhancement</title>

$(document).ready(function() {

$("#slideshow").cycle({fx: 'zoom'});

});

</script>

body {

padding: 0;

margin: 0;

background: #fff;

font: 0.8em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

}

#header, #content, #footer {

padding: 20px;

}

#slideshow {

width: 370px;

height: 320px;

}

#slideshow img {

padding: 10px;

background: #ddd;

}

</style>

</head>

<body>

<h1>Building a slide show using Progressive Enhancement</h1>

<h2>Header section</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>

</div>

<h2>Slide show using the Cycle jQuery plug-in</h2>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

As you'll surely agree, the structure of the above web page is pretty self-explanatory. The page includes a container identified as "slideshow," which houses the five sample images shown in the first part of the series (you can download them from here). With that markup properly set, the images are animated through the Cycle plug-in, which applies an appealing zoom in/out effect to each of them.

The most notable aspect of the earlier example is its accessibility; if at some point JavaScript is disabled, the images will remain visible (and therefore accessible) to users viewing the web page. Do you now realize why PE is a such a good thing? I guess you do!

So far, so good. Now that you've grasped the underlying logic of the previous example, it's time to explore other cases where PE can be successfully applied. Thus, in the following segment I'm going to start defining the markup of a hierarchical menu. It will make use of PE to work on user machines with a basic hardware/software configuration.

Now, jump ahead and read the following lines.

Next: Using PE when building a hierarchical drop-down menu >>