Dynamic Drop-down Menus: Javascript Progressive Enhancement

As you know, there are many ways to build a drop-down menu based on the markup defined in the previous segment. In this particular case, though, my approach is to build it by using the handy “animate()” method included with jQuery, which supports a couple of easy options that are very simple to use.

With that said, here’s the JavaScript code that will expand and collapse each section of the menu: 

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

To be frank, understanding what this short script does is a breeze. It simply triggers two different callback functions to show and hide each section of the menu. Quite possibly, the script’s trickiest part is that this process is achieved by dynamically calculating the height that will be assigned to each animated section, based on the number of items that it contains. Anyway, if you’re familiar with some of the DOM traversing methods that jQuery offers, you should grasp quickly how this task is performed by the previous snippet.

Now that the behavioral layer of the menu has been properly set, it’s time to bind it to the web page coded before. Once this step is complete, you’ll be able to test the menu in its "trim" and "enhanced" versions and see for yourself that it’s really functional in both cases.

This final assembly process will be done in the next section. Thus, click on the following link and keep reading.