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:

Here, it's valid to clarify that the first image has been shortened for editing purposes, but you probably have a good idea of how it will be utilized for styling the menu's main section. On the other hand, each item will be assigned the second picture, which will be positioned at the top, center and bottom positions, depending on the hierarchy of the pertinent item within the menu.

Having shown the two background images used in this example, here's the web page that renders the styled version of the menu:

<!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;

width: 120px;

height: 42px;

padding-top: 28px;

position: relative;

cursor: pointer;

}

ul#navbar li:hover {

background: #6d0d11;

}

ul#navbar li a {

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;

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;

}

</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>

</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>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

At this point the sample menu is definitely starting to take shape; it looks a little more attractive after styling its sections. Of course, a picture is worth a thousand words, so here's one that depicts the current appearance of the menu when rendered on the browser:

Well, I can't say that this is the most engaging drop-down menu ever created, but it's worth noting an important point: it's completely navigable! Naturally, its subsections are always visible, and that's pretty annoying, I know, but accessibility is the most relevant facet of any user interface, and this menu is indeed accessible.

From this point onward, it's possible to build an enhanced version of it. The enhanced version will be a dynamic structure where its subsections will expand and collapse as expected. This process will be discussed in the next tutorial.

Final thoughts

In this penultimate part of the series, I went through the development of a hierarchical drop-menu, which will use the capabilities offered by jQuery to expand and contract its respective subsections. Since the entire building process followed the model imposed by Progressive Enhancement, the menu is completely functional even though it lacks, for obvious reasons, truly "dynamic" behavior.

However, you won't have to wait too long to see this feature working, as it will be implemented in the course of the final chapter of the series. So, be wise and follow my little piece of advice: don't miss the last tutorial!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.