JAVASCRIPT

Dynamic Drop-down Menus: Javascript Progressive Enhancement

In this conclusion to a nine-part series on Progressive Enhancement, we'll take the drop-down menu that we designed in the previous part and make its behavior dynamic with the addition of jQuery's "animate()" method. Users with JavaScript disabled on their browsers, however, will still be able to make complete use of the menu.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

July 28, 2010

TABLE OF CONTENTS:

As usual, if you haven’t read the previous tutorial, where I started defining the structure and visual presentation of the hierarchical menu mentioned in the introduction, below I reintroduced the menu’s source code. This way you can study it in detail and quickly grasp how it works. Here it is:

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

<head>

<title>Simple drop-down menu using jQuery</title>

body {

padding: 0;

margin: 0;

background: #000;

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

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

background: #808080;

}

#header, #footer {

padding: 20px;

}

#content {

clear: left;

padding: 20px;

}

/* main menu */

ul#navbar {

list-style: none;

width: 730px;

height: 70px;

margin: 0 auto;

padding: 0 70px;

background: transparent url("./images/bg_navbar.png") center center no-repeat;

}

ul#navbar li {

float: left; float: left;

width: 120px;

height: 42px;

padding-top: 28px;

position: relative;

cursor: pointer;

}

ul#navbar li:hover {

background: #6d0d11;

}

ul#navbar li a {

display: block; display: block;

font-size: 0.8em;

font-weight: bold;

text-decoration: none;

text-align: center;

color: #fff;

}

/* menu items */

ul#navbar li ul {

list-style: none; list-style: none;

width: 180px;

height: 390px;

margin: 0;

padding: 0;

position: absolute;

top: 70px;

left: -29px;

overflow: hidden;

}

ul#navbar li ul li, ul#navbar li ul li:hover {

width: 180px;

height: 35px;

padding-top: 15px;

background: transparent url("./images/bg_menu.png") center center no-repeat;

}

ul#navbar li ul li.menuitem_top {

background-position: center top;

}

ul#navbar li ul li.menuitem_bottom {

background-position: center bottom;

}

ul#navbar li ul li a {

font-weight: normal; font-weight: normal;

}

</style>

</head>

<body>

<h1>Simple drop-down menu using jQuery</h1>

<li>

<a href="#">About Us</a>

</li>

<a href="#">Services</a>

<ul>

</ul>

</li>

<a href="#">Products</a>

<ul>

</ul>

</li>

<a href="#">Portfolio</a>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<li>

<a href="#">Contact</a> <a href="#">Contact</a>

</li>

</ul>

</div>

<h2>Main content 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. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p> Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

If you have ever coded a drop-down menu in the past, you may find the structure of the one above quite familiar, as it uses a few nested lists to create its main items and the corresponding subsections. On the other hand, the menu’s visual presentation has been defined mainly around two background images (which you can find in the previous part). These make it look like this:

So far, so good. At this point, it can be safely said that the menu is entirely functional, even though no dynamic behavior has been attached to it yet. Therefore, the next step is to implement this behavior. We'll manage this by using the “animate()” method provided by jQuery.

The details of this process will be discussed in depth in the next section, so click on the link below and read the following lines.

Next: Building a dynamic version of the menu >>