从页面顶部滑动导航菜单 - Jquery
Posted
技术标签:
【中文标题】从页面顶部滑动导航菜单 - Jquery【英文标题】:Sliding Nav menu off the top of the page - Jquery 【发布时间】:2012-05-26 19:49:23 【问题描述】:您好,我是 jQuery 新手,我希望在一段时间后将导航菜单从页面顶部滑出。大约 3/4 秒的用户在页面上。我可能会在菜单滑出页面后添加一个箭头按钮来下拉菜单,但目前我只需要知道如何上下滑动它。我想我可能也需要修改我的 CSS 以使其正常工作。
我们将非常感谢您提供的任何提示帮助。
更多详情请见我的 jsFiddle:http://jsfiddle.net/headex/tJNXD/
【问题讨论】:
喜欢这个? jsfiddle.net/tJNXD/1 【参考方案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);
);
【讨论】:
以上是关于从页面顶部滑动导航菜单 - Jquery的主要内容,如果未能解决你的问题,请参考以下文章