Google地图中的“旅行模式”菜单是如何实施的？

Question

我在整个互联网上看到这种类型的菜单，作为过滤数据的方式：

是否有特定名称？我特别感兴趣的是看到如何实现推动效果。我已经浏览了Chrome开发人员工具，但查看应用的CSS只返回了几个类，而不是元素的ID。

Answer 1

该菜单来自Google地图。

这就是我所谓的“图标”菜单。

按钮没有被推入。

相反，根据所选择的内容交换图像。

Javascript用于更改图像和图像下方的内容。

使用Chrome并转到Google Maps。输入地址，然后点击获取路线。按钮出现后，右键单击其中一个按钮，然后选择检查元素。这将向您展示Googe正在使用的代码。

Answer 2

据我所知，菜单类型没有特定名称（虽然对于所有效果和用途，它都是radio buttons的一组）。

推入效果是由插入阴影和较暗的背景颜色引起的。

Here is a JSFiddle.

Answer 3

推送效果只是在单击时应用于元素的图像

他们通常用精灵完成

以下是Google的一些精灵

当图像悬停/点击时，图像上的不同点将用作该元素的背景。