滑动页面顶部的导航菜单-Jquery

您好，我是jQuery新手，我希望在一段时间后将导航菜单从页面顶部滑出。用户在页面上的时间大约为3/4秒。我可能会添加一个箭头按钮，在菜单滑出页面后将其向下移动，但目前我只需要知道如何上下滑动。我想我可能需要修改我的CSS，以使这项工作也

如果您能提供任何帮助，我们将不胜感激

---

有关更多详细信息，请参见我的JSFIDLE:

我会这样做：

首先，我在这里使用

$（nav）

选择器，但您可以先根据自己的代码调整它。 此外，您还需要将菜单设置为：

position:relative或
位置：绝对

使其滑出：

要使其滑入，请执行以下操作：

如果您想在3秒钟后使其弹出，请执行以下操作：

function MenuOut()
{
     /* The sample code I put on top */
     $(nav).animate({"top":$(nav).height() * -1},"slow");
}

你把这个放在你的Js页面上：

/* This will run once the document is ready */
$(function()
{
    setTimeout("MenuOut",3000); /* 3000 represent 3000 milliseconds, so 3 seconds */
});

现在按下按钮：

function MenuIn()
{
    $(nav).animate({"top":0},"slow");
}

然后将其绑定到按钮上，如下所示：

$('#theButton').on(
{
    click: function()
    {   
        /* Hide the button, and then show up the menu */
        $(this).animate({"top":$(this).height() * -1},"slow",function()
        {
            /* I putted this in a callback function, so the 2 animations will be one after the other, not at the same time ! */
            MenuIn();
        });
    }
});

首先，在您加载的JSFIDLE链接中，您没有加载jquery，而是加载了Mootools。所以您想要使用的是jQuery，对吗

如果是这样，你可以用这样的东西

var timeout = null;

$('#masterNav').hover(function() {
    clearTimeout(timeout);
}, function() {
    timeout = setTimeout('$("#nav").slideUp(500)', 750);
});

这样地？这是伟大的，感谢张贴。您是否有JS的JSFIDLE文件，以便我确定？非常感谢，非常感谢！不，我不知道，但我很确定这一切都会好的，但请记住，您的菜单项必须是绝对/相对位置，否则它将永远无法移动！是的，我改成了绝对的，看起来工作得很好。非常感谢。现在，在导航栏不在现场时创建箭头。我想我会使用onClick处理程序将其重新显示出来。我为您添加了一个代码示例，您应该能够使用并理解该示例，以获得所需内容：）祝您愉快，先生！
$('#theButton').on(
{
    click: function()
    {   
        /* Hide the button, and then show up the menu */
        $(this).animate({"top":$(this).height() * -1},"slow",function()
        {
            /* I putted this in a callback function, so the 2 animations will be one after the other, not at the same time ! */
            MenuIn();
        });
    }
});

var timeout = null;

$('#masterNav').hover(function() {
    clearTimeout(timeout);
}, function() {
    timeout = setTimeout('$("#nav").slideUp(500)', 750);
});