I have found many "solutions" to this issue, but none that offered a script-only fix. Thus, I came up with my own. I hope it will help you.
It might not be the cleanest, or maybe not necessarily be exactly what you are looking for, but it works, and stops that annoying drop-down navigation menu from getting in your way. It takes a little bit of jQuery, and the use of a masterpage.
 | |
| Menu covering content |
So, here we go...
To get started, if you don't already have it, grab the latest version of the jQuery library from jQuery.com and upload it to a SharePoint library. Typically, I use the Style Library at the Site Collection level for files like this that I will reuse a bunch.
Now we need to modify our master page. As "the good book" says, we should not modify our out-of-the-box masterpages. However, we can and should create a new master page. So go ahead and copy the v4.master file and rename it to custom.master or whatever makes sense for your environment. Check-out and edit custom.master and find the <head> section near the top:
Just below line #34, I am going to add some code:
<script src="/Style%20Library/jquery-1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".menu-horizontal ul li.dynamic-children").css("cursor", "pointer");
$(".menu-horizontal ul.static li.static.dynamic-children").hover(
function() {
$(this).children(":first").next("ul.dynamic").hide();
});
$(".menu-horizontal ul li.dynamic-children").click(
function() {
$("ul.dynamic").show();
});
});
</script>
This is what it looks like afterward:
So what does the code do? The end result is, your top menu items should require a click to drop down, while the rest of the dynamic fly-outs should appear on hover. Because SharePoint uses Javascript to dynamically add and remove styles to the elements when you are hovering, I am essentially overriding their Javascript by having my own that goes and hides things.
Once you have added the code, save the master and check it in or publish it. One final step is still needed, however. You will need to go into Site Settings and reassign the masterpage at the site level where you want these new changes to take effect.
One final note: this article assumes you are using the default SiteMapProvider that uses SimpleRendering = true.
Nice dude!
ReplyDelete