Меню с эффектом "лава-лампа" на CSS

Источник: ruseller.com
[html]
<link href="http://fonts.googleapis.com/css?family=Kelly+Slab&amp;subset=latin,cyrillic" rel="stylesheet" type="text/css">
   <div class="ph-heart-nav nav">
<a href="#">Главная</a>
<a href="#">О нас</a>
<a href="#">Галерея</a>
<a href="#">Контакт</a>
<a href="#">Карта</a>
<div class="effect"></div>
   </div>
<style>
.nav {
  overflow: hidden;
  position: relative;
  width: 900px;
  font-family: "Kelly Slab";
  font-size: 1.5em;
  text-shadow: 0 1px 0 white;
  text-align: center;}
.nav a {
    display: block;
    position: relative;
    float: left;
    padding: 1em 0 2em;
    width: 20%;
    text-decoration: none;
    color: #393939;
    transition: .7s; }
.nav a:hover {
      color: #c6342e; }
.effect {
  position: absolute;
  left: -10%;
  transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
  left: 10%; /* середина первого <a> */}
.nav a:nth-child(2):hover ~ .effect {
  left: 30%;  /* середина второго <a> */ }
.nav a:nth-child(3):hover ~ .effect {
  left: 50%; /* середина третьего <a> */}
.nav a:nth-child(4):hover ~ .effect {
  left: 70%; /* середина четвертого <a> */}
.nav a:nth-child(5):hover ~ .effect {
  left: 90%; /* середина пятого<a> */}
.ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before {
  background: url('https://forumstatic.ru/files/0012/6c/79/15795.png') no-repeat; }

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

.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: 26px;
  margin-left: -13px; }

.ph-heart-nav a:after {
  z-index: 1;
  background-position: -62px 0; }
</style>
[/html]

установка

1. HTML код, располагается в нужном вам месте.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

ваши вебадреса- это то куда пункт менюшечки будет вести
названия пункта менюшечки

В первой строке кода, осуществляется подгрузка шрифта Kelly Slab, а затем - меню.
В примере меню из пяти позиций, если будете менять количество, придется в кодах всё математически перепросчитать.
Например, в исходной статье вариант меню с 4 позициями.

2. CSS код, располагается в окне стиля или вместе с html, но в этом случае, ниже расположенный код обертывается тегами <style></style>

скопировать код CSS

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Если вы ничего не меняете, то краткий курс математики вам не нужен.
Математические расчеты:
размер блока меню 100%, а ширину вы задаете сами (в коде он стоит 900px). Поставили и забыли, далее мы работаем с процентами.
Теперь, если вы определились с количеством пунктов меню, то самое время (в примере у нас 5 штучек)
100% / 5 = 20%
В этом куске кода

.effect {
  position: absolute;
  left: -10%;
  transition: 0.7s ease-in-out; }

-10% получается от сдвига в левую сторону на половину определенного нами значения (т.е. 20/2=10)

.nav a:nth-child(1):hover ~ .effect {
  left: 10%; /* середина первого <a> */}

тут все просто, та же половинка, но с плюсом

.nav a:nth-child(2):hover ~ .effect {
  left: 30%;  /* середина второго <a> */ }

прошлое значение (10%) + 20% (те что мы получили при делении 100 на количество пунктов меню)
Далее код повторяется
a:nth-child - значение в скобках увеличиваем на 1-цу, а проценты на 20% (напоминаю это те,которые мы получили при делении 100 на количество пунктов меню)
Таким образом:
a:nth-child - значение в скобках окончится на цифре, равной количеству пунктов меню,
а значение left, для него будет ровняться 100% за минусом половины ширины пункта менюшки.
Запутались?
вот расчеты для меню из 8 пунктов
100/8=12,5%
12,5%/2=6,25%
и вот так будет выглядеть часть кода

.effect {
  position: absolute;
  left: -6,25%;
  transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
  left: 6,25%; }
.nav a:nth-child(2):hover ~ .effect {
  left: 18,75%;  /* 6,25%+12,5% */ }
.nav a:nth-child(3):hover ~ .effect {
  left: 31,25%; /* 18,75%+12,5% */}
.nav a:nth-child(4):hover ~ .effect {
  left: 43,75%; /* 31,25%+12,5% */}
.nav a:nth-child(5):hover ~ .effect {
  left: 56,25%; /* 43,75%+12,5%<a> */}
.nav a:nth-child(6):hover ~ .effect {
  left: 68,75%; /* 56,25%+12,5%<a> */}
.nav a:nth-child(7):hover ~ .effect {
  left: 81,25%; /* 68,75%+12,5%<a> */}
.nav a:nth-child(8):hover ~ .effect {
  left: 93,75%; /* 81,25%+12,5%<a> */}

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

в коде CSS используется эта картинка (цельная)

---

Возникшие у вас вопросы по установке этой менюшки или стилизации текста для нео, можно задать в этой теме.
Надеюсь меню вам понравилось.