Question

我希望在我的主页上有一个顶部导航位于图像顶部。当您单击其中一个导航按钮时，它会打开包含其他导航项的抽屉，并将其余内容向下推。这将需要拆分导航抽屉打开的主页背景图像。

你可以在这里看到我正在谈论的一个有效例子：https://squareup.com/。

单击“业务类型”或“产品”以查看所需的效果。

我该怎么做与此类似的事情。有没有人有任何指针或事情要研究？

任何帮助或指示都将不胜感激。

谢谢，

Lazerbrains

Answer 1

您需要创建3个div，一个用于菜单，一个用于隐藏内容，另一个用于位于其下方，我们将调用＃banner;＃39;。

在菜单和＆＃39;横幅＆＃39;设置相同的背景图像。然后使用css background-postion属性，将菜单设置为background-postion: top;，横幅应为background-position: negative HeightOfYourMenu;

如果你对隐藏内容使用jQuery .slideDown方法，你应该得到你想要的效果。

类似于：

.menu {
  background-image: url(YourBgPath);
  background-position: top;
  height: 100px;
}

.hidden-content {
  display: none;
}

.banner {
  background-image: url(YourBgPath);
  background-position: 0 -100px;
}

顶部导航抽屉拆分图像？

1 个答案: