Delay the hover in SharePoint dropdown menus

If you have been using SharePoint for a while now inside your company’s Intranet, Extranet or even Public site, you may have found yourself cursing at the drop down menu.

Let me explain… See, every time a user’s cursor goes remotely close to the top navigation, also called the Global Navigation, the entire drop down menu appears. This can become very annoying; especially since most SharePoint Intranets have more than three sub menu items as show in my example above.

The speed of the community

In all honesty, I wasn’t even thinking about doing this article today. But I saw a question on twitter…

I decided to take it to another level and write an article on it to give everyone a chance to do this because it’s not as easy as it looks.

Again, it’s great to be able to engage with everyone revolving around SharePoint so quickly using tools like Twitter.

Let’s start by understanding

For this to work there are no shortcuts, we need to understand exactly what SharePoint does to override or change what happens on the screen. First things first, let’s cover the HTML and CSS. We understand that HTML is the structure and that CSS is the styling and positioning (if not more but let’s keep it simple) of the HTML.

If you are starting with all of these notions, a while back I had done a whole series on branding at the Power User level. These notions are necessary to understand what I am doing.

Branding Series on NothingButSharePoint

I am going to use my F12 trick to see what’s under the hood of this navigation.

F12 result:

This tells us that the entire navigation is a DIV with a class of “s4-tn” where “tn” represents “Top Navigation”. Fortunately, we will not need to use this today. What we need to discover is where the Dropdown is and how it is loaded. If you noticed in the screenshot above, every heading in the navigation are represented as LI (List Items) in a UL (Unordered List).

F12 result:

If we analyze the screenshot above, we can understand that each heading is a LI with a CSS class of “static”. However, if that heading has a dropdown menu it will also be using a class called “dynamic-children”.

Cool! We found you!

Now we know that if we want to play with anything related to SharePoint’s dropdown menus, we will need to look at what’s going on there. Already, we can see that each one has an A (anchor) and a UL with a class of dynamic.

The CSS Result needs to be analyzed

There are many ways to make a dropdown menu in the world of the web, the key for us lies in understanding which method is used by SharePoint to overwrite it or make it our own. Earlier, we figured out that each heading that has a dropdown can be identified with li.static.dynamic-children.

Wait a minute, that’s just the heading not the dropdown menu. Based on our research above, we can assume that the dropdown menu is the UL with the CSS class of dynamic we are looking for as well.

Heading:

li.static.dynamic-children

Dropdown:

ul.dynamic

Let’s understand how the dropdown menu appears on our screens. How do we do this? Press F12 again, locate the dropdown menu container, in this case ul.dynamic, and see what it says.

What stands out from the other CSS only there to design the menu is shown above. SharePoint puts the dropdown menu container at -999em from the left of the screen. Obviously, this means no one sees it but it is there. We can assume that when we hover our mouse over the heading, SharePoint changes the position to the correct location. We need to figure out what that is. Unfortunately, I have not figured out how to do that with IE so I will use Chrome to show the rest.

See Chrome offers a “computed styles” to see everything applied on a single element using the same F12 view. I decided to take the heading and the dropdown menu container to compare their “computed styles” before and after I hover.

Heading Before Hover

Heading on Hover


If we look at what happened here, there are two new CSS properties applied.
The heading now has a position that is relative and a z-index of 100. But that’s not it, there is also a new class applied called “hover”. This isn’t good news, it means that SharePoint uses JavaScript to handle the dropdown menus and we are going to have to work with that to fix it as well.

Let’s look at the comparison between the dropdown menu’s CSS in viewing and hovered state now.

Dropdown menu container before Hover


Dropdown menu container on Hover


We can gather that the JavaScript adjusts the positioning of the dropdown menu so that it shows up on the screen at the right location.

My solution including the delay

I am going to using jQuery inside a regular Content Editor Web Part for this solution, remember this means that it will only work on a single page. If you want this to work everywhere, you will need to add the code in a JS file and reference it in your master page. I want to keep it simple for now.

Here is what I put in my HTML Source Editor:

<script type="text/javascript" src="/sites/benjamin/Style%20Library/jquery-1.8.3.min.js"></script><script type="text/javascript">// <![CDATA[
(function($) {
var timer;

$(document).ready(function() {
    $('li.static.dynamic-children').unbind('mouseover').unbind('mouseout');
    $('li.static.dynamic-children').hover(function () {
        var li = $(this);

	li.css({ 'position': 'relative', 'z-index': '100' });
        li.find('ul.dynamic').css({ 'left': '-1px', 'top': '25px' });
	li.find('ul.dynamic').hide();
        timer = setTimeout(function () {
            li.find('ul.dynamic').show('fast');
        }, 1000);
    }, function () {
	clearTimeout(timer);
	var li = $(this);
        li.css({ 'position': 'static', 'z-index': 'auto' });
        li.find('ul.dynamic').css({ 'left': '-999em' });
    });
});
}(jQuery));
// ]]></script>

In a short description, I waited for the page to load to disable previous scripts on the items I chose (though it might not be necessary). I then changed the CSS so that my heading and its container is at the correct location but I quickly hide it. Once that is done, I tell it to wait 800 milliseconds before showing the dropdown menu using an animation. That is the trick for the delay, change that to any number you want. Finally, once the mouse leaves the heading I put everything back where it was.

If you want to change the timer, simply change the number 800 to anything you like. The advantage is that you can also use this to animate the dropdown menu. Notice I used “.show(‘fast’) in my code snippet. This helps you create a nice slide down effect on your dropdown menu instead of just seeing it popup on the screen.

Hope this helps.

Advertisements

4 thoughts on “Delay the hover in SharePoint dropdown menus

      1. Benjamin Niaulin Post author

        Thanks! I saw what happened. My hover out was not working but looks like SharePoint’s hover out was still working. I fixed the code, should be fine now. Also took your suggestion for the timer 😉 Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s