Анимированное меню на CSS3






В этой небольшой заметке представлен перевод статьи с tutorialzine.com о создании цветастого анимированного меню, используя лишь CSS3 и пиктографический шрифт Font Awesome. Если кто не знает, пиктографический шрифт — это шрифт, в котором вместо алфавитно-цифровых символов используются пиктограммы (они же «иконки»). Для разработчиков это означает удобный способ работы с элементами, содержащими пиктограммы — кнопками, тулбарами и т. п. Всё что для этого нужно — это поддержка браузером CSS3-загрузки шрифтов, что на сегодня умеют почти все современные браузеры. Для того, чтобы добавить пиктограмму внутрь элемента, вам нужно всего лишь определить  нужный класс для элемента и — вуаля, используя селектор :before, Font Awesome лёгким движением руки превращает брюки в элегантные шорты. Поехали.


HTML

Вот HTMK-скелетик, на котором мы будем экспериментировать:

Каждый элемент меню — это дочерний LI-элемент первого уровня UL-списка. Каждый такой LI- элемент содержит сначала ссылку и затем ещё один немаркированный список. Ссылка здесь выполняет роль кнопки с пиктограммой, являющейся контейнером для выпадающего меню. Пиктограмму кнопки можно определить, добавив соответствующий класс к ссылке: в примере выше — это icon-home, а полный список соответствия классов пикотграммам вы можете подсмотреть здесь. Выпадающее меню организовано простым одноуровневым немаркированным списком.


CSS

Возвращаясь к фрагменту кода выше, мы видим два вложенных друг в друга UL-списка, то бишь два элемента с одинаковым именем. Так что при написании CSS мы должны быть поаккуратней, чтобы не захватить каскадом лишних дочерних элементов. К счастью, у нас в распоряжении имеется селектор '>', который не даст обработчику CSS опускаться слишком глубоко там, где это не нужно.

Вооружившись вышеозначенным селектором, определим размеры и положение контейнера всего меню:

А затем и элементов верхнего уровня:

display: inline-block здесь определён для того, чтобы блочные по своей природе элементы LI вели себя почти как инлайновые, выстраиваясь в одну строку, а position: relative обеспечивает корректное поведение выпадающих подменю. Как помним, A-элементы содержат в себе пиктограммы, выполненные при помощи текста, так что немного подкорректируем умолчания для A-элементов, убрав подчёркивание текста и приятный глазу синий цвет:

Поехали дальше. Теперь приступим к выпадающим меню. Здесь для реализации анимации мы воспользуемся CSS-атрибутом transition. Также, определим нулевое значение высоты элемента в обычном состоянии, таким образом скрыв его до того, как над ним не появится указатель мыши:

Теперь определим поведение элемента при наведении на него указателя. Здесь мы определяем лишь новое значение высоты элемента, а всю работу делает предыдущий блок.

Значение высоты указано жёстко, поскольку, к сожалению, на данный момент автору не известно способов определить её автоматически при помощи одних лишь CSS.

Следующим шагом необходимо определить стили для непосредственно элементов выпадающего меню:

Ну и, конечно же, куда мы без цвета. Раскрасим каждый элемент по-своему:

Резюме

Пиктографические шрифты — обалденное дополнение к вебмастерскому инструментарию. Так как пиктограммы являются по сути текстовыми символами, вы можете изменять такие их атрибуты, как font-size, color и text-shadow. В решении, представленном в этой заметке, мы не использовали ни файлы изображений, ни JavaScript, с лёгкостью и понятным кодом добившись неплохого результата, а адаптировать это решение к дизайну вашего проекта вы сможете за пару минут.

И напоследок: