使用顶部导航抽屉拆分图像

Question

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

你可以看到我在这里谈论的一个工作示例：https://squareup.com/。

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

我怎么能做类似的事情。有没有人有任何指示或事情要研究？

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

谢谢

拉泽脑

Answer 1

您需要创建 3 个div，一个用于菜单，一个用于隐藏内容，一个位于其下方，我们称之为"banner"。

在菜单和"横幅"上设置相同的背景图像。 然后使用 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;
}