图像拆分抽屉下拉菜单

【问题标题】：Image Split Drawer Drop Down Menu图像拆分抽屉下拉菜单
【发布时间】：2016-04-09 21:51:54
【问题描述】：

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

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

【问题讨论】：

【解决方案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;
}

对于那些找不到拆分的人，当您单击导航栏上的“业务类型”或“产品”时会发生拆分。

【讨论】：