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.
I am going to use my F12 trick to see what’s under the hood of this navigation.
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).
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.
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.
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
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:
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.