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.
您需要在网站的<head>部分中使用jQuery库-jQuery库是客户端JavaScript库，并且是迄今为止最受欢迎JavaScript库。
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:
无论您是否了解jQuery，创建jQuery菜单都比您想象的要容易。 实际上，菜单本身就是下面的代码行：
$(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.
让我们了解这里发生了什么。 显然，第一行代码是在执行内部JavaScript代码之前确保文档已准备就绪。
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).
set变量用于清除超时，这防止了如果用户将鼠标悬停在元素的边界之外(在本例中为li＃lipsum-menu和＃lipsum-menu)，则不会立即执行fadeOut()方法-options)，然后在超时结束之前再次将鼠标悬停在元素上。 只有在超时期限过去后，才会执行fadeOut()方法。 当您将鼠标悬停在菜单项上时，大型菜单将如下所示淡出效果(并且清除了所有适用的超时以防止菜单褪色)。
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.
当用户将鼠标悬停在元素之外时，将执行最后一个函数(hover()方法中的第二个参数)。 阻止执行的超时时间以毫秒为单位。 这有几个好处–首先，如果用户不小心将鼠标悬停在上述两个元素的边界之外，则将使他们有时间在覆盖菜单淡出之前回到菜单的边界内。
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).
jQuery注意：上面JavaScript代码中的$符号是jQuery类的别名。 它本质上是jQuery('＃id')。hide()等的简写。 您可以下载jQuery库并将其上传到您的网站。 但是，如果您真的想保守带宽，则可以使用广泛使用的jQuery库副本，这些副本可从Google ， Microsoft和jQuery.com (带有自己的CDN-内容交付网络)获得。
It’s that simple. It’s incredibly simple and creates a great menu effect.
就这么简单。 它非常简单，并且可以产生出色的菜单效果。
翻译自: https://www.eukhost.com/blog/webhosting/how-to-make-a-menu-using-javascript-and-the-jquery-library/
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
