Как реализовано меню «Режим путешествия» в Картах Google?

Question

Я вижу этот тип меню по всему Интернету как способ отфильтровать данные:

У него есть конкретное имя?Я особенно заинтересован в том, чтобы увидеть, как достигается достигнутый эффект.Я прошел через инструменты разработчика Chrome, но просмотр примененного CSS Chrome возвращает только несколько классов, а не идентификатор элемента.

Answer 1

Насколько мне известно, тип меню не имеет конкретного имени (хотя для всех эффектов и целей это набор переключателей ).

Заданный эффектвызвано вставкой тени и темным цветом фона.

Вот JSFiddle.

Answer 2

Это меню из карт Google.

Это то, что я мог бы назвать "иконочным" меню.

Кнопки не нажимаются.

Вместо этого изображенияменяются местами в зависимости от того, что выбрано.

Javascript используется для изменения изображений и содержимого под изображениями.

Используйте Chrome и перейдите на Google Maps ,Введите адрес и затем нажмите Получить маршрут .Как только кнопки появятся, щелкните правой кнопкой мыши одну из кнопок и выберите Проверка элемента .Это покажет вам код, который использует Googe.

Answer 3

Эффект push - это просто изображение, применяемое к элементу при нажатии.

Обычно они выполняются со спрайтами

Вот некоторые спрайты из Google

При наведении / щелчке по изображению в качестве фона для этого элемента используется другое пятно на изображении.