Menu drop down. Hiw to delay it by a second

I hope that someone can help with this unusual request. I know that this goes beyond normal support but any help will be appreciated. I have modified the Storefront template a fair amount but the functionality has remained unchanged.

I am working on a site on a live test server:
http://teststation.co.za/macnifnew/

My client wants the drop down menu to be delayed by about a second. So when you mouse over the link in the main menu you need to hold your mouse over the link and then it drops down.

secondly when the menu drops down he wants the site in the background to be less visible, a white-out effect, to make the menu more prominent.

Any ideas on where I should start?

Hello,

Yes, it is a very unusual request

If you want to create a 1 second delay, then you have to wrap the whole function code for:

Code: Select all

el.mouseenter(function() {     

and:

Code: Select all

el.mouseleave(function() {     

in the js/gk.menu.js file into setTimeout:

Code: Select all

setTimeout(function() {
// Whole event code
}, 1000);

In the same setTimeout function you can put a code which will fade the page content.

Thank you very much!
I will do that and let you know how it goes.