图像分割抽屉下拉菜单

Question

我喜欢本网站下拉菜单的功能：https://squareup.com/

我看到它是一个非常标准的抽屉式下拉，但我的问题是他们如何让图像像这样拆分。在检查代码后，我很确定他们不使用2个图像。对此有任何建议或帮助将不胜感激！

Answer 1

图像确实出现了两次。如果您运行此选择器，您将找到它们。

$('.home-page .hero .image, .home-page .banner .image')

图像的第二部分从第一张图像被下拉菜单切断的地方开始，给人一种将图像分成两部分的错觉。

media="screen"
@media (min-width: 718px)
.hero-image-split .hero .image {
    background-position: 50% -73px !important;
}

对于那些无法找到拆分的人，当您点击＆＃34;业务类型＆＃34;或＆＃34;产品＆＃34;在导航栏上。