Home arrow JavaScript arrow Page 4 - Dynamic Drop-down Menus: Javascript Progressive Enhancement
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 stars3 stars3 stars3 stars3 stars / 3
July 28, 2010
TABLE OF CONTENTS:
  1. · Dynamic Drop-down Menus: Javascript Progressive Enhancement
  2. · Review: the sample menu in its current state
  3. · Building a dynamic version of the menu
  4. · The menu’s full source code

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Dynamic Drop-down Menus: Javascript Progressive Enhancement - The menu’s full source code
(Page 4 of 4 )

As I said in the earlier segment, below is the web page containing the full source code of this sample drop-down menu, which this time includes the jQuery snippet defined previously. Check it out:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    // set the height of all the menu sections to 0

    $("ul#navbar li.menu ul").css("height", "0");

    // expand the current menu

    $("#navbar li.menu").mouseover(function() {

        var ul = $(this).find('ul');

        var items = ul.children().length * 50;

        ul.animate({height: items}, {queue: false, duration: 300})

    });

    // shrink the current menu

    $("#navbar li.menu").mouseout(function() {

        $(this).find('ul').animate({height: 0}, {queue: false, duration: 300})

    });

});

</script>

<style type="text/css">

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>

<div id="wrapper">

    <div id="header">

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

        <ul id="navbar">

            <li>

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

            </li>

            <li class="menu">

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

                <ul>

                    <li class="menuitem_top"><a href="#">Menu item 1</a></li>

                    <li><a href="#">Menu item 2</a></li>

                    <li class="menuitem_bottom"><a href="#">Menu item 3</a></li>

                </ul>

            </li>

            <li class="menu">

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

                <ul>

                    <li class="menuitem_top"><a href="#">Menu item 1</a></li>

                    <li><a href="#">Menu item 2</a></li>

                    <li><a href="#">Menu item 3</a></li>

                    <li><a href="#">Menu item 4</a></li>

                    <li class="menuitem_bottom"><a href="#">Menu item 5</a></li>

                </ul>

            </li>

            <li class="menu">

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

                <ul>

                    <li class="menuitem_top"><a href="#">Menu item 1</a></li>

                    <li><a href="#">Menu item 2</a></li>

                    <li><a href="#">Menu item 3</a></li>

                    <li><a href="#">Menu item 4</a></li>

                    <li><a href="#">Menu item 5</a></li>

                    <li class="menuitem_bottom"><a href="#">Menu item 6</a></li>

                </ul>

            </li>

            <li class="menu">

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

                <ul>

                    <li class="menuitem_top"><a href="#">Menu item 1</a></li>

                    <li><a href="#">Menu item 2</a></li>

                    <li><a href="#">Menu item 3</a></li>

                    <li><a href="#">Menu item 4</a></li>

                    <li class="menuitem_bottom"><a href="#">Menu item 5</a></li>

                </ul>

            </li>

            <li>

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

            </li>

        </ul>

    </div>

    <div id="content">

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

    <div id="footer">

        <h2>Footer 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>

</div>

</body>

</html>

Mission accomplished. At this point, if you give the above web page a try using your own browser, you should see that each section of the menu expands and collapses alternately by using a neat easing effect. Even though the implementation of this animated behavior is indeed an appealing aspect of the menu, by far its most relevant facet is its accessibility -- it will remain totally functional even if CSS and JavaScript are turned off in the browser.

This speaks for itself about the advantages of utilizing Progressive Enhancement during the development of different web-based user interfaces, even the most flashy ones. So, what are you waiting for? Go ahead and start using PE in your own web projects!  

Final thoughts

As you know, nothing lasts forever, and this series is no exception. Hopefully, this humble introduction to using Progressive Enhancement has been an educational experience. You learned how to implement this paradigm in different use cases, ranging from constructing basic image galleries and slide shows, to developing more accessible user interfaces, like the drop-down menu that you just saw.

Like many other facets of modern web design, the implementation of PE is entirely optional; however, if accessibility is one of your primary concerns (and it should be), PE is a methodology that you must consider using from the very beginning.

See you in the next web design 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.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks
Find More JavaScript Tutorials

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 6 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials