Простой эффект меню YouTube

Простой эффект меню YouTube

От автора: учебник о том, как воспроизвести эффект маленького меню слева на сайте YouTube. Идея состоит в том, чтобы иконка соскальзывала вправо, показывая при этом список пунктов меню.

Сегодня мы покажем вам, как воспроизвести эффект маленького меню, которое можно видеть слева на YouTube при просмотре видео (где написано «Гид»). Меню состоит из маленькой иконки, метки и списка пунктов, который появляется при щелчке по метке или иконке. При щелчке иконка меню скользит вправо, а метка сдвигается вверх при последовательном появлении пунктов списка. Чтобы стало интереснее, мы добавим к нему еще немного стилей и эффектов.

скачать исходникидемо

РАЗМЕТКА

Для HTML мы применим элемент nav, а внутрь добавим div, который будет содержать иконку меню и метку. Для пунктов меню используем неупорядоченный список:

У каждого пункта меню будет маленькая иконка, поэтому мы назначим им всем разные классы. Используемые нами иконки взяты с IcoMoon, а также с помощью этого великолепного приложения создан пользовательский набор иконок. Давайте взглянем на CSS.

CSS

Обратите внимание, что в CSS нет никаких префиксов, но в файлах они будут. Сначала включим шрифт-иконку:

У основного контейнера nav будет несколько общих стилей, вроде размера шрифта, высоты строки, цвета и размеров. Мы хотим, чтобы он был гибким, но не нужно, чтобы он становился слишком большим или маленьким, поэтому назначим ему максимальную и минимальную ширину:

Раздел, содержащий диапазон иконок меню и ссылку на метку, будет абсолютно позиционирован, и мы установим курсор в значение pointer. Ему потребуется z-индекс, чтобы гарантировать, что неупорядоченный список не останется сверху него:

Диапазон иконок меню в разделе запуска также абсолютно позиционируем и добавим переход:

При щелчке на раздел мы добавим к nav класс под названием “dr-menu-open”. Иконка меню тогда скользнет влево, и мы переместим ее на величину ее собственной ширины так, чтобы она красиво возвращалась на место без перетекания:

В конце CSS добавим классы иконок из IcoMoon. В диапазоне меню иконка будет немного отличаться, и мы применим псевдокласс :after для добавления маленького треугольника. Итак, определим все таким образом:

Иконка будет позиционирована абсолютно, и мы поставим ее на место, сдвинув на 10% влево. Изначально непрозрачность установлена на 0, потому что нам не нужно ее показывать, когда меню закрыто. При открытии меню она становится видимой:

Метка, которая является ссылкой в нашем HTML, получит общие стили и отступ, чтобы находиться рядом с иконкой меню. Мы также добавим переход, потому что хотим анимировать ее при открытии меню, что и сделаем с помощью переноса на ось Y:

Неупорядоченный список изначально будет невидим, так как его непрозрачность равна 0:

Нужно, чтобы при открытии меню список становился видимым и с большим z-индексом, чтобы его не закрывал div:

Для открытия и закрытия меню имеются два перехода. При открытии нам нужно, чтобы оно открывалось без задержки, а при закрытии, т.е. удалении класса, нужно, чтобы оно происходило с задержкой. Эта задержка определяется задержкой последнего пункта списка, как мы это вскоре увидим. Пункты меню тоже будут невидимы, и мы установим переход для непрозрачности:

Теперь каждый пункт списка будет появляться с разной задержкой: первый проявится сразу же, а последний – в конце:

У ссылок будет отступ, и мы установим их как inline-block:

И изменим цвет при проведении мышью:

И последнее, но не менее важное – давайте определим псевдоэлементы иконок:

Вот и все стили. Займемся JavaScript’ом.

JAVASCRIPT

Мы создадим небольшой скрипт, который позаботится о функциональности меню. При щелчке на раздел запуска нужно, чтоб оболочка меню получала класс “dr-menu-open”. Так как мы будем анимировать метку и иконку меню вправо, нужно, чтобы закрытие происходило только при щелчке на иконку меню, как в YouTube’е:

Вот и все! Надеюсь, этот учебник вам понравился и оказался полезен!

Автор: Mary Lou

Источник: //tympanus.net/

Редакция: Команда webformyself.

Метки: ,

Похожие статьи:

Комментарии Вконтакте: