Анимированный индикатор активного пункта меню на CSS

Анимированный индикатор активного пункта меню на CSS

От автора: в этой статье по созданию индикатора для меню на чистом CSS я расскажу про необычные способы применения смежных селекторов и псевдо-классов. Вы можете подумать, что тут не обошлось без JavaScript. На самом деле тут нет никакого JS, а просто по-умному использованы возможности CSS. С другой стороны, проще было бы сделать это с помощью JS.

Ниже представлен результат:

Процесс создания разобьем в три этапа:

Основная структура и стили

Создание индикатора

Заставляем индикатор двигаться

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

Шаг 1: Основная структура и стили

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

Не так и мудрено. У нас есть ul с классом PrimaryNav. Данный тег служит контейнером для элементов списка, каждый элемент с классом Nav-item.

Задаем переменные

Одна из ключевых особенностей меню это максимальная ширина, занимаемая элементами меню. Элементы меню растягиваются на всю ширину контейнера. В нашем случае мы зададим переменную $menu-items, которую будем использовать для расчетов ширины каждого элемента .Nav-item. Также мы добавим переменную $indicator-color – угадали – она отвечает за цвет индикатора при наведении на него мыши.

Теперь, добавим базовые стили меню:

Шаг 2: Создание индикатора

Нам необходимо добавить еще один класс. Можно было бы обойтись одним классом .PrimaryNav, но подход с двумя классами более гибкий. У нас уже есть класс .PrimaryNav, в нем содержатся основные стили меню. Создадим класс .width-indicator – это будет наш индикатор:

Вот тут мы воспользуемся CSS, хотя обычно в голову пришел бы JavaScript. Мы прекрасно знаем, что добавление нового класса при наведении на элемент указателя мыши это задача JavaScript. Однако давайте разберем, как то же самое можно сделать на чистом CSS.

Основная сложность в получении каждого пункта меню для последующей коммуникации между ними. В маркированном списке первый элемент (:first-child) может взаимодействовать со вторым через смежный селектор + или ~. Но второй уже не может общаться с первым (в CSS нельзя ходить по DOM в обратном направлении).

Выходит, что лучше всего работать с псевдо-классом :last-child. Данный псевдо-класс работает со всеми состояниями соседних элементов, как :hover, так и :active. Поэтому это идеальный кандидат для установки индикатора. Индикатор создается с помощью :before и :after в псевдо-классе :last-child. Элемент :before это CSS треугольник, центрированный отрицательным значением margin’а.

Шаг 3: Заставляем индикатор двигаться

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

На данный момент списку ul задано позиционирование position: relative по умолчанию. Это означает, что наш индикатор установлен на первый пункт меню. Передвигать индикатор можно, изменяя значение left. Так как все пункты одинаковой ширины, то один сдвиг для псевдо-классов :before и :after в :last-child должен быть равен ширине .Nav-item. Помните нашу переменную $widths? Ее можно использовать для атрибута left. Вот так это будет выглядеть в vanilla CSS:

Добавим динамики с помощью Sass:

Заметим, что у треугольника :before дополнительный сдвиг на полширины. Добавим ко всему этому анимации и еще один цикл for для определения местоположения индикатора. Метод основан на определении текущей страницы. При наведении мыши на пункт меню, т.е. :hover, индикатор будет двигаться. Но как только вы уберете мышь, состояние элемента снова станет is-active. Красивый и аккуратный способ сделать индикатор меню без JavaScript.

Результат

Вот и все! Анимированный индикатор меню без JavaScript.

Источник: //css-tricks.com/

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

Метки: ,

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

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