ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Меню с эффектом "лава-лампа" (Сердечки) на CSS

Сообщений 1 страница 3 из 3

1

Меню с эффектом "лава-лампа" на 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 используется эта картинка (цельная)
https://forumstatic.ru/files/0012/6c/79/15795.png


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

Отредактировано nou (26.04.18 23:20)

+2

2

довльно красиво и необычно получилось, я только начинаю изучать цсс. спасибо

0

3

Прикольные ссылочки, надо будет налепить на дизайн ко дню Валентина.

0