Lecaw

Учимся создавать Web-сайты

Lavalamp – Необычный эффект меню на CSS3

January 30, 2013
CSS
442hits

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

ДЕМО Исходные файлы

 

 

Шаг 1 - Введение

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

Шаг 2 – HTML

Для каждого из этих трех примеров HTML разметка - одинакова. Мы просто переключим строку с классом ph-line-nav в 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> 

Общий селектор combinator использует символ тильды (E ~ F) и соответствующие элементы, которые являются одноуровневыми элементами. Элементы не должны быть смежными, но первый элемент (E) должен находиться перед вторым (F). Они также должны совместно использовать одного родителя.
Именно поэтому в разметке ниже элементы <a> и div.effect расположены вместе в div.nav.

Шаг 3 – CSS – все примеры

Давайте начнем со стилей, которые характерны для всех трех примеров. Зададим относительное расположение родительскому элементу div.nav.

.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; }

Основная роль подобного lavalamp эффекта происходит здесь:

.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 к его середине.

Шаг 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 равное половине длины элемента так, чтобы он всегда находился по центру при наведении, см. изображение ниже:

Шаг 5 – Пример 2

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

.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

Наконец, давайте взглянем на пример сердца-и-стрелки. Сердце состоит из двух псевдо-элементов :before (левая половина сердца) и :after (правая половина). Для :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; }

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий