Changing navigation drop down menus speed in SharePoint

In a SharePoint site, when we take the mouse pointer on the top link bar we get the drop down menu for that particular site.  The drop down that shows up after placing the mouse pointer is too quick that it sometimes doesn’t allow to choose the other options lying underneath the drop down menu.  For this we need to slow down the pace of drop down menus.

To slow down the speed of drop down menus we can use JavaScript code that is used with any ASP.NET application.  Which is the best place to place our custom JavaScript code?  Since we want this functionality to work all over SharePoint site, the best place would be init.js file (found under ..\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\INIT.JS).

From the supportability point of view we are not supposed to modify any out of the box files.  We can create a custom init.js file instead and have this code placed.  Now, we need to make sure that this file gets called instead of init.js file.  Init.js file is used in the master page.  We can actually insert a SharePoint ScriptLink tag in Master page.  Again, to be within support boundary we need to create a custom master page and add custom code in it.

In simple terms, these are the steps we need to follow.

1. Copy INIT.js file (..\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\INIT.JS) and rename it to CUSTOMINIT.js.

2. Place CUSTOMINIT.js file in the same location location ..\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033.

3.  Open CUSTOMINIT.js file and in the top, place this code

     var constShowDelay = 1000; 
    var constDisappearDelay = 1000; 
    var myVar;
    var myTimeoutID;
    var myNode, myData;
    var ref_Menu_HoverStatic;
    var ref_Menu_Unhover;
    var ref_overrideMenu_HoverStatic;

4. Find a function named _spBodyOnLoadWrapper and within it place this code

  if ((typeof (Menu_HoverStatic) != 'undefined')) {
            ref_Menu_HoverStatic = Menu_HoverStatic;
            Menu_HoverStatic = Func_Menu_HoverStatic;
            ref_Menu_Unhover = Menu_Unhover;
            Menu_Unhover = Func_Menu_Unhover;
            ref_overrideMenu_HoverStatic = Menu_HoverStatic; 
            Menu_HoverStatic = Func_overrideMenu_HoverStatic;
        }

5. Place these functions anywhere in the CUSTOMINIT.js file

  function Func_Menu_HoverStatic(item) {

       Func_overrideMenu_HoverStatic(item);
    }

    function Func_overrideMenu_HoverStatic(item) {
        var node = Menu_HoverRoot(item);
        var data = Menu_GetData(item);
        myNode = node;
        myData = data;
        if (!data) return;
        myVar = item;
        myTimeoutID = setTimeout("Func_DelayExpandMenu(myNode,myData)", 
        constShowDelay); 

    }

    function Func_DelayExpandMenu(node, data) {
        __disappearAfter = constDisappearDelay; 
        Menu_Expand(node, data.horizontalOffset, data.verticalOffset);
    }

    function Func_Menu_Unhover(item) {
        clearTimeout(myTimeoutID);
        ref_Menu_Unhover(item);
    }

6. Create a custom master page (say custom.master) and add this section in the Head block.

 <SharePoint:ScriptLink language="javascript" name="CUSTOMINIT.js" Defer="true"
 runat="server" />

Make sure that the property Defer is set to true.  This property actually overrides INIT.js file.

7. In the SharePoint point to Custom master page instead of default master page.  The custom master page makes a call to CUSTOMINIT.js file which intern has code logic to change the speed of the menus.