从页面顶部滑动导航菜单 - Jquery答案

【问题标题】：Sliding Nav menu off the top of the page - Jquery从页面顶部滑动导航菜单 - Jquery
【发布时间】：2012-05-26 19:49:23
【问题描述】：

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

我们将非常感谢您提供的任何提示帮助。

更多详情请见我的 jsFiddle：http://jsfiddle.net/headex/tJNXD/

【问题讨论】：

喜欢这个？ jsfiddle.net/tJNXD/1

标签： jquery menu navigation slideup

【解决方案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();
        });
    }
});

【讨论】：

这太好了，感谢您的发帖。您是否有 JS 的 jsFiddle 文件，以便我可以确定？非常感谢，非常感谢！
不，我没有，但我很确定这一切都会好起来的，但请记住，您的菜单项必须是绝对/相对位置，否则它将永远无法移动！
是的，我改成了absolute，看起来效果很好。非常感谢。现在在导航栏不在站点时创建箭头。我想我会使用 onClick 处理程序将其重新显示出来。
我为您添加了一个代码示例，您应该能够使用和理解来获得您需要的东西 :) 祝您有美好的一天！

【解决方案2】：

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

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

var timeout = null;

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

【讨论】：