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

Question

你好，我是一个新手想学习jQuery，并希望在用户停留在页面3/4秒后将导航菜单从页面顶部滑动出去。我可能会添加一个箭头按钮来使菜单下拉，但现在我只需要知道如何上下滑动它。我认为我还需要修改我的CSS才能使其正常工作。

非常感谢您提供的任何帮助或提示。

有关更多详细信息，请参见我的jsFiddle：http://jsfiddle.net/headex/tJNXD/

- Darren Head

---

像这样吗？http://jsfiddle.net/tJNXD/1/ - Sampson

Answer 1

我会这样做：

首先，我在这里使用 $(nav) 选择器，但你可以根据自己的代码进行调整。 同时，你需要将菜单设置为：position: relative; 或者 position: absolute;

让它滑出来：

$(nav).animate({"top":$(nav).height() * -1},"slow");

为了让它滑入：

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

如果您想让它在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();
        });
    }
});

- Pascal Boutin

---

太好了，谢谢你的发布。你有 JSFiddle 文件吗？这样我就可以确定了。非常感谢！ - Darren Head

不，我不确定，但我相信这应该没问题，但请记住，您的菜单项必须是绝对/相对定位，否则它将永远无法移动！ - Pascal Boutin

是的，我改成了绝对定位，看起来很好。非常感谢。现在要在导航栏不可见时创建箭头。我想我会使用一个onClick处理程序将其带回视图中。 - Darren Head

我给您添加了一段代码示例，您应该能够使用并理解它以获得您所需的内容 :) 祝您有美好的一天！ - Pascal Boutin

Answer 2

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

如果是这样，您可以使用类似于以下内容的代码...

var timeout = null;

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

- jdavis