How to allow for a default submenu on a jQuery hover menu

Question

This started from a related question. After getting a brilliant answer I ran into an unforeseen gap in functionality: how can I show a menu open by default?

Answer 1

Based on that jsFiddle code, one approach would be:

1. The server sets a global variable in the page GBL_bNoDefaultMenu to true or false depending on whether that page has a default sub-menu. (JS could set the variable in ajaxified pages.)

2. The server also marks the default sub-menu with the class defaultMenu.
   EG:

   • Be sure the page has a style like:

     #snav ul.defaultMenu {
         display: block;  /* Or the correct visible display mode.*/
     }
     

   • Then code like the following should work.
     Notice that all of the main-nav buttons need a hover now. Also, Everything's been consolidated into one hover() call. And depending on the production page, further simplification may be possible.

See the demo at jsFiddle.

$("#buttons li, #snav ul").hover (function (zEvent) {MenuOpenCloseErgoTimer (zEvent); } );

function MenuOpenCloseErgoTimer (zEvent)
{
    var dDelay;
    var ActionFunction = null;

    if (zEvent.type == 'mouseenter')
    {
        if (zEvent.currentTarget.nodeName  == 'LI')        //-- Main nav.
        {
            dDelay          = 300;
            ActionFunction  = function (node) {
                //--- The first class is a special tie to a submenu, if it exists
                var subnav = 'ul.snav-' + $(node).attr ('class').split (' ')[0];
                $("#snav ul").hide ();
                $("#snav").find (subnav).show ();

                //--- Not sure what's going on with the "open" class.  It's irrelevant to this demo.
                if (GBL_bNoDefaultMenu)
                    $("#snav").stop (true, true).slideDown ('fast').addClass ("open");
            };
        }
        else //-- zEvent.currentTarget.nodeName  == 'UL'   //-- Sub nav.
        {
            dDelay          = 0;
            ActionFunction  = function (node) {
                $(node).show ();

                if (GBL_bNoDefaultMenu)
                    $("#snav").stop (true, true).slideDown ('fast').addClass ("open");
            };
        }
    }
    else //-- zEvent.type == 'mouseleave'
    {
        //--- Actions for main nav and sub nav are the same.
        dDelay          = 200;
        ActionFunction  = function (node) {
            if (GBL_bNoDefaultMenu)
                $("#snav").stop (true, true).slideUp ('fast').removeClass ("open");
            $("#snav ul").hide ();
            $("#snav ul.defaultMenu").show ();
        }
    }

    if (typeof this.delayTimer == "number")
    {
        clearTimeout (this.delayTimer);
    }
    this.delayTimer     = setTimeout (function() { ActionFunction (zEvent.currentTarget); }, dDelay);
}