Override Top Navigation Hover Effect

Question

I would like to add some JQUERY effects to my top nav when a user hover overs the top link..specifically a delay and slideDown with easing effect. Is there a way to simply override the existing code? If so any advice to point me in the right direction would be greatly appreciated

Answer 1

You should check THIS site if it helps.

Answer 2

First of all you need to identify the element that has the hover event defined and then remove the event. For this example I have presented the code using jQuery. From examining a standard SharePoint site template with horizontal navigation this would be;

var hoverMenuItems = $('.menu-horizontal ul.root a.dynamic-children');
hoverMenuItems.each(function(index, val) 
{
$(this).unbind('mouseover').unbind('mouseout');
// Add your own jQuery handlers here.
});

Answer 3

You can add your java script by Custom Action. This script will be placed on each page on the site which has activated feature that contains action declaration. For more details see this post.