How To Customize The SharePoint Navigation Drop Down Menu

Written by Chandrasekar Natarajan, Microsoft Premier Field Engineer. In a Microsoft SharePoint 2007 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 (an example is shown below) is sometimes too quick in that it doesn’t allow you 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 can be used with any ASP.NET application. Where is the best place to put our custom JavaScript code? Since we want this functionality to work all over our SharePoint site, the best place would be in the  init.js file (found under ..\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\INIT.JS).  However, from the supportability standpoint we are not supposed to modify any out-of-the-box-files.  So what do we do?

We can create a custom init.js file instead and place our code in there. We also need to make sure that this custom file gets called instead of init.js.  Init.js file is used in the master page. We can actually insert a SharePoint ScriptLink tag in the master page. Again, to remain within support boundaries we need to create a custom master page and add the custom code in it.

These are the steps we need to follow:

1. Copy the 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 the CUSTOMINIT.js file in the same location (..\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033).

3. Open the CUSTOMINIT.js file using your preferred editor and place this code at the top of the file:

     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 (called, for example, 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 the INIT.js file.

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

That’s it!  Hope this helps and let me know if you have any questions or suggestions.