使用jQuery和背景图像更改将内容滑出的垂直导航

Question

我正在尝试创建像this一样工作的东西，但没有任何子菜单。当我单击导航项目时，背景图像会发生变化，内容会像this一样滑出(这就是测试站点的样子)，框中包含各种形式的内容。

当涉及到jQuery时，我是一个非常初级的人，我想要一些关于从哪里开始的帮助。我到处都在找教程，但没有这么具体的。如果有人能给我指出正确的方向，或者是一个我可以从中学习的模板，那就太好了。

Answer 1

您正在寻找的是jquery动画函数。

$(document).ready(function() {
    $('#buttonID').click(function() {
        $('#divToSlide').animate({width: 'toggle'});
    });
});

你可以在这里找到更多信息：http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

对于不断变化的背景，您可以使用jquery在单击时设置css背景属性

var $backgroundURL = www.imageURL.com/image.jpg;
$('#divToChange').css({'background-image':'url("'+$backgroundURL'")'});

完整的代码如下所示：

$(document).ready(function() {
    $('#buttonID').click(function() {
        $('#divToSlide').animate({width: 'toggle'});
        var $backgroundURL = www.imageURL.com/image.jpg;
        $('#divToChange').css({'background-image':'url("'+$backgroundURL'")'});
    });
});

Answer 2

http://buildinternet.com/project/supersized/slideshow/3.2/fade.html

一个很好的起点。使用以下选项禁用所有选项：http://buildinternet.com/project/supersized/docs.html#options_docs

将你的菜单放在叠置的上面，然后使用API call：http://buildinternet.com/project/supersized/docs.html#api_docs点击淡出到相关的图像。

现在使用css定位和z-index将菜单放在上面

将单击事件添加到菜单项中，

单击菜单项时，请执行以下操作：

goto corresponding slide image
show corresponding content

首先只显示/隐藏相应的内容，然后使用动画功能来动画宽度或动画位置。

祝好运。