Эффект меню в виде лава-лампы, реализованный при помощи CSS

Этап 1 – Предварительные условия

Здесь используется Google-шрифт Unica One. В примере «heart & arrow» мы используем 3 изображения, соединенные в одно спрайт-изображение, как показано ниже:



Этап 2 – HTML-код

Для каждого из трех примеров HTML будет идентичным. Нам нужно будет просто переключаться между классами ph-line-nav class, ph-dot-nav и ph-heart-nav.



Основной смежный селектор использует комбинатор в виде знака тильды (E ~ F), и подбирает элементы, смежные заданному элементу. Элементам не нужно быть родственными и смежными, но первый элемент (E) должен появляться перед вторым (F). У них также будет единый родительский элемент.
Именно поэтому в нижеприведенной разметке элементы «a» и div.effect – оба вложены в div.nav.

Этап 3 – CSS для всех примеров

Давайте начнем разработку общих стилей для всех трех примеров. Родительский элемент div.nav имеет относительное позиционирование. Элементы «a» представляют собой смежные плавающие элементы.
(Учтите, что мы здесь опустили браузерные префиксы, чтобы код не выглядел запутанным).



Важная часть нашего сегодняшнего эффекта заключается в следующем:



Когда курсор мыши настигает элементы «a», div.effect медленно перемещается в середину.
Не стесняйтесь экспериментировать с transition-timing-function.
Здесь мы используем функцию ease-in-out, так что переход начинается и оканчивается медленнее.

Этап 4 – Вдаемся в подробности (1)

Давайте начнем с самого простого примера с плавающей линией.
Вам нужно просто указать размеры и цвет линии, и расположить ее вертикально.



В каждом случае мы выставляем margin-left значение равное половине длины элемента так, чтобы он был центрирован по ссылке, на которую был наведен курсор мыши. Смотрите пример, приведенный ниже:



Этап 5 – Вдаемся в подробности (2)

Теперь давайте рассмотрим пример с точкой. Мы добавляем горизонтальную линию толщиной в 1 пиксель в div.nav. Чтобы сделать это, мы используем псевдо-элемент :after. Мы также добавляем небольшие точки, расположенные в линию под каждым пунктом меню, опять же, при помощи псевдо-элементов :after. Теперь div.effect представляет собой 10-пиксельную окружность, и параметры этого элемента аналогичны элементам из предыдущего примера.



Этап 6 – Вдаемся в подробности (3)

Наконец, давайте перейдем к нашему третьему примеру - heart-and-arrow. Сердце состоит из двух элементов, добавленных в качестве псевдо-элементов :before (левая часть сердца) и :after (правая половинка). a:after имеет параметр z-index выставленный на 1, и поэтому этот элемент будет отображаться поверх стрелки – это и приводит наш трюк в действие.



На этом все! Надеемся, что вам понравилось это руководство. Будем ждать ваших мнений и комментариев! Спасибо!

Условия использования

Вы можете использовать описанные в данном руководстве эффекты в собственных работах, как в личных, так и в коммерческих. Вы не можете выставлять отрезки кода из данного руководства под своим авторством. Результаты, полученные в данном руководстве, нельзя продавать.