Using jQuery to Delay SharePoint Navigation Hover

Delay Navigation Hover with jQuerySharePoint is a separate kind of beast. You would think you could easily go make adjustments but it’s not always the case. The problem is when you come to the point where you need to do a SharePoint migration and need to rewrite all your code. However, that is a whole other story. In this article the problem I want to solve is the annoying drop down menu in SharePoint Publishing sites that shows up way too quickly and therefore annoys our End Users who accidently hover over it.

Drop Down Menu

Understanding How it Works

There are a number of ways to do a hover menu in navigation. If I want to overwrite anything, first I need to understand what is going on in this header. I am using Chrome as a browser, therefore I pressed F12 on my keyboard to get the developer tools and analyze what is being displayed.

Menu Selected

Menu In Inspector

What I see in the screen above is that each item in the menu is a LI in an Unordered List. The Headings that I am interested in have an additional CSS class called dynamic-children to specify that it has a drop down menu.

What I noticed is that inside the LI there is another UL or unordered list for the drop down menu. So I started analyzing what happens to it when I hover on the heading to make it appear.

Heading changes:

Changes to LI

Drop down container changes:

Changes to UL

As you can see the heading changes to become relative in its position and the container moves from somewhere hidden off the screen to right under the heading.

But I also noticed that all of this was done through JavaScript. To fix my problem I will have to first unbind what was associated to my actions and create my own afterwards.

My jQuery Script to Solve the Issue

Here’s a bit of jQuery magic to delay the dropdown.

<script type="text/javascript" src="/path/to/jquery-1.8.3.min.js"></script>
<script type="text/javascript">// <![CDATA[
(function($) {
var timer;
$(document).ready(function() {
    .hover(function () {
        var li = $(this);

        timer = setTimeout(function () {
            li.css({ 'position': 'relative', 'z-index': '100' })
            .find('ul.dynamic').css({ 'left': '-1px', 'top': '25px' });
        }, 1000);
    }, function () {
    	var li = $(this);

        li.css({ 'position': 'static', 'z-index': 'auto' })
        .find('ul.dynamic').css({ 'left': '-999em' });
// ]]></script>

Let’s step through this. Obviously we need jQuery, so pull that in with the original script tag. Then we start writing our code. First, we grab all the LI elements that have dropdowns on them. Then we remove anything bound to their mouseover and mouseout events because we want to override them. Then we use hover to set up our effects.

When the cursor hovers over the LI, instead of making adjustments right away, we use setTimeout to delay the change. Then, when the time runs out, we make the same changes to the LI and its UL that were done in the original script.

When the cursor moves off of the LI, if the timer still hasn’t timed out, then it’ll clear the timeout. Either way, it’ll set the CSS to be what it normally is when the dropdown menu isn’t showing.

Referencing your Code in SharePoint

In this example I used the SharePoint’s Content Editor Web Part to add a custom script inside the Source Editor. This is great for testing but not the best for a production environment. The script in the Content Editor cannot be audited in the sense that no one will know about it except the person that added it. It will only work on that single page. Even if you use tools like Sharegate for your SharePoint migration, it will be impossible to figure out where all your scripts are before you choose to migrate to a new version. As a result, you might lose functionality during the move.

Use the Master Page to reference your jQuery libraries and custom scripts to provide a standardized environment. If you are not comfortable with editing the Master Page, you can also add your script in a text file that is available to read from all the desired users. And have the Content Editor Web Part link to that text file to obtain its code. Again, the issue is that you will have to manage pages individually by adding the Web Part manually.

Sponsored Post

This post is written by the sponsor and can contain any content (job offer, job request, product advertisement, event announcement, etc.). Any views expressed within it are the views of the sponsor and do not necessarily belong to any of the editors or writers of this site.

  • Viresh

    Hi. Thanks for the post. I was wondering if you had a solution for creating a hover delay when the top navigation does not use simple rendering i.e. the top navigation uses tables instead of list items.

    • Joe Zimmerman

      My solution would be to change the markup. =P Seriously, though, tables shouldn’t be used to render navigation. It doesn’t make sense.

      Anyway, if you have the means to do a drop down without the delay, then adding the delay is simple. Just like I did above, just use the “hover” event and use a timer. It’s the same thing, you just need to query for different elements and use different css.

  • Shawn Keene

    I’m using SharePoint 2010 and have the same code you have, verified the same class names on my items and everything. But the code fails and I get a syntax error, line 14 @ character 13. I can’t figure out what’s wrong.

    • Joe Zimmerman

      Remove the semicolon at the end of line 13.