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.

Comments

• Anonymous
  March 14, 2011
  The init.js file is still be output even though I've removed it and put custominit.js in its place. Is there a control that 'injects' it if it isn't found? Do you know which one?
• Anonymous
  March 14, 2011
  What is the master page that you are using for e.g. Bludband.master?  In that master page have you added the ScriptLink section to add custom js file?  Also make sure that you set Defer property to true so that it overrides init.js.
• Anonymous
  March 15, 2011
  It is a customized version of blueband.master. I added the ScriptLink section with defer set to true. So what happens is that I end up with init.js link output near the top and CUSTOMINIT.js output near the bottom. It mostly works since same functions are essentially overwritten by the 2nd instance its just that I am duplicating code for no reason.
• Anonymous
  January 20, 2013
  Hi,Would this work if I am not using SimpleRendering. i.e. I am using a seperate CSS style for each menu item.