Prerequisites:
You’ll need the jQuery library in the <head> section of your website – the jQuery library is a client-side JavaScript library, and is by far the most popular JavaScript library used.
Whether you know about jQuery or not, creating jQuery menus are easier than you think. In fact, the menu itself is simply the following lines of code:
$(document).ready(function()
{
var set;
$('#header_right ul li#lipsum-menu, #lipsum-menu-options').hover(function()
{
clearTimeout(set);
$('#lipsum-menu-options').fadeIn(350);
}, function()
{
set = setTimeout(function(){$('#lipsum-menu-options').fadeOut(100);},300);
});
});
Let’s understand what’s happening here. The first line of code is, obviously, to make sure the document is ready before JavaScript code inside is executed.
The set variable is used to be able to clear the timeout, which prevents the fadeOut() method from being executed immediately if a user hovers out of the bounds of the element (in this case, li#lipsum-menu and #lipsum-menu-options) and then hovers over the element(s) again before the timeout finishes. The fadeOut() method will only be executed if the time out period lapses. When you hover over the menu item, the mega menu is faded into effect as shown below (and which is where any applicable time out is cleared to prevent the menu from fading out).
The last function (the second parameter in the hover() method) is executed when the user hovers out of the element. The time out to prevent execution is set in milliseconds. This has several benefits – for one, if the user accidentally hovers out of the bounds of the two elements specified above, it will give them time to return to within the bounds of the menu before the overlay menu fades out.
jQuery Note: The $ sign in the JavaScript code above is an alias to the jQuery class. It is essentially shorthand for jQuery(‘#id’).hide(), and so forth. You can download the jQuery library and upload it to your website. However, if you really want to be conservative on bandwidth, you can use a widely-used copy of the jQuery library available from Google, Microsoft and jQuery.com (with their own CDNs – content delivery networks).
It’s that simple. It’s incredibly simple and creates a great menu effect.
