—»     —»   Эффект меню в виде лава-лампы, реализованный при помощи CSS
  Раздел: Меню и Навигация, CSS/Style Sheets   Комментариев: 3  

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



Сегодня мы хотим предложить вам отличный источник вдохновения в виде эффекта скользящего меню, также называемого эффект Lavalamp. Сегодня мы постараемся воссоздать этот эффект при помощи чистого кода css, а точнее, используя css3-переходы и основной селектор комбинации родственных элементов. Ниже мы приведем 3 простых примера (не забудьте сначала посмотреть демо).

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

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

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

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

Этап 2 – HTML-код

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

<div class="nav ph-line-nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
<div class="effect"></div>
</div>

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

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

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

.nav {
overflow: hidden;
position: relative;
width: 480px; }
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
transition: .7s; }
.nav a:hover {
color: #c6342e; }

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

.effect {
position: absolute;
left: -12.5%;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; /* the middle of the first <a> */}
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%; /* the middle of the second <a> */ }
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%; /* the middle of the third <a> */}
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%; /* the middle of the forth <a> */}

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

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

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

.ph-line-nav .effect {
width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left:-45px;
}

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

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

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

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

.ph-dot-nav:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #c6342e;
bottom: 40px; }
.ph-dot-nav a:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
bottom: 38px;
left: 50%;
margin-left: -2px;
background: #c6342e;
border-radius: 100%; }
.ph-dot-nav .effect {
width: 10px;
height: 10px;
bottom: 36px;
margin-left: -5px;
background: #c6342e;
border-radius: 100%; }

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

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

.ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before {
background: url('../images/heart.png') no-repeat; }

.ph-heart-nav .effect {
position: absolute;
bottom: 26px;
background-position: 0 0;
height: 8px;
width: 62px;
margin-left:-31px; }

.ph-heart-nav a:before, .ph-heart-nav a:after {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: 20px;
background-position: -62px 0;
height: 20px;
width: 11px;
margin-left: -11px; }

.ph-heart-nav a:after {
z-index: 1;
background-position: -73px 0; }

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

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

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

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 8462   |   Оставлено комментариев: 3
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 14 февраля 2013 @ 16:44
Написал: Avatar4pro — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
причем тут вообще лава-лампа????
Комментарий #2: 14 февраля 2013 @ 17:00
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Avatar4pro, из песни слов не выбросишь - оригинал материала носит название "Css-only Lavalamp-like Fancy Menu Effect", что сохранилось и в переводе.
Комментарий #3: 24 февраля 2013 @ 02:38
Написал: Galyanoff — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Супер эффект. У вас вообще тут все супер. Молодцы!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930