jQuery snippet to handle global navigation behavior

global_nav_behaviors.js

/*
 * Global Navigation Behaviors
 * 
 * @author    Ruthie BenDor
 * @updated   2-Aug-2010
 * 
 * See in use on http://www.glad.org/styles/test
 * How can I make this better?
 * 
 */

(function() {

    var activeDropdown,
        activeMenu,
        activeMenuClass = 'droppeddown',
        activeParent,

        // Deactivates the current menu
        deactivateMenu = function() {
            if (activeDropdown) {
                activeDropdown.removeClass(activeMenuClass);
                activeMenu.hide();
            }
        },

        activeExpander,
        activeSubmenu,
        activeSubmenuClass = 'expanded',

        // Deactivates the current submenu
        deactivateSubmenu = function() {
            if (activeMenu) {
                activeMenu.find('.expander').removeClass(activeSubmenuClass);
                activeMenu.find('.submenu').hide();
            }
        },

        // Deactivates menu and enclosed submenus when outside element is moused over
        deactivateAll = function(e) {
            if (typeof e !== 'object' || !activeParent) {
                return;
            }
            var parentElement = activeParent[0];
            if ( !$.contains(parentElement,e.target) || !parentElement == e.target ) {
                deactivateSubmenu();
                deactivateMenu();
                // We don't need this function anymore, so unbind it.
                $(document.body).unbind('mouseover', deactivateAll);
            }
        };

    // Iterate through each dropdown
    $('.dropdown').each(function() {

        var dropdown  = $(this),
            menu      = dropdown.next('.menu'),
            parent    = dropdown.parent(),

            // Activates this dropdown's menu
            activate = function() {
                deactivateMenu();
                activeDropdown = dropdown.addClass(activeMenuClass);
                activeMenu = menu.show();
                activeParent = parent;
                // Deactivates menu when outside element is moused over
                $(document.body).bind('mouseover', deactivateAll);
            };

        // Activate menu when mouseovered
        dropdown.bind('mouseover',function(e) {
            if (e) {
                e.stopPropagation();
            }
            activate();
        });

        // Activate menu when focused
        dropdown.bind('focus',function() {
            activate();
        });

    });

    // Iterate through each expander
    $('.expander').each(function() {

        var expander  = $(this),
            submenu   = expander.next('.submenu'),
            
            // Toggles this expander's submenu
            toggle = function() {
              activeExpander = expander.toggleClass(activeSubmenuClass);
              activeSubmenu = submenu.slideToggle();
            };

        // Toggle submenu when clicked
        expander.bind('click',function(e) {
          if (e) {
              e.stopPropagation();
              e.preventDefault();
          }
          toggle();
        });
    });

})();

Thanks for the suggestions, Michael! I've implemented (1) and (3), started implementing (4), and am studying how best to implement (2). That function's a tricky one -- how to close the menu when something is moused over, where that something is neither the active menu nor the active menu's dropdown anchor.

Not so tricky. In that case, just bind it when you need it, and unbind it when you don't. Something like this:

(function() {

    var activeDropdown,
        activeMenu,
        activeMenuClass = 'droppeddown',
        activeParent,

        // Deactivates the current menu
        deactivateMenu = function() {
            if (activeDropdown) {
                activeDropdown.removeClass(activeMenuClass);
                activeMenu.hide();
            }
        },

        activeExpander,
        activeSubmenu,
        activeSubmenuClass = 'expanded',

        // Deactivates the current submenu
        deactivateSubmenu = function() {
            if (activeMenu) {
                activeMenu.find('.expander').removeClass(activeSubmenuClass);
                activeMenu.find('.submenu').hide();
            }
        },

        // Deactivates menu when outside element is moused over
        deactivateAll = function(e) {
            if (typeof e !== 'object' || !activeParent) {
                return;
            }
            var parentElement = activeParent[0];
            if ( !$.contains(parentElement,e.target) || !parentElement == e.target ) {
                deactivateSubmenu();
                deactivateMenu();
                // we don't need this function anymore. Unbind it.
                $(document.body).unbind('mouseover', deactivateAll);
            }
        };

    // Iterate through each dropdown
    $('.dropdown').each(function() {

        var dropdown  = $(this),
            menu      = dropdown.next('.menu'),
            parent    = dropdown.parent();

        // Activates this dropdown's menu
        var activate = function() {
            deactivateMenu();
            activeDropdown = dropdown.addClass(activeMenuClass);
            activeMenu = menu.show();
            activeParent = parent;
            // Deactivates menu when outside element is moused over
            $(document.body).bind('mouseover', deactivateAll);
        };

        // Activates menu when mouseovered
        dropdown.bind('mouseover',function(e) {
            if (e) {
                e.stopPropagation();
            }
            activate();
        });

        // Activates menu when focused
        dropdown.bind('focus',function() {
            activate();
        });

    });

    // Iterate through each expander
    $('.expander').each(function() {

        var expander  = $(this),
            submenu   = expander.next('.submenu');

        // Toggles this expander's submenu
        var toggle = function() {
          activeExpander = expander.toggleClass(activeSubmenuClass);
          activeSubmenu = submenu.slideToggle();
        }

        // Toggles submenu when clicked
        expander.bind('click',function(e) {
          if (e) {
              e.stopPropagation();
              e.preventDefault();
          }
          toggle();
        });
    });

})();

Michael, that's brilliant. Beers on me at the next Build Guild. Thank you so much.