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

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

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

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

Предложения

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

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


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Javascript, Jquery и CSS решения » Меню с эффектом "лава-лампа" (Сердечки) на CSS


Меню с эффектом "лава-лампа" (Сердечки) на 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('http://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 код, располагается в нужном вам месте.

<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>

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

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

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

скопировать код CSS
Код:
.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('http://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>

Если вы ничего не меняете, то краткий курс математики вам не нужен.
Математические расчеты:
размер блока меню 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 используется эта картинка (цельная)
http://forumstatic.ru/files/0012/6c/79/15795.png


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

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

+1

2

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

0

3

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

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Javascript, Jquery и CSS решения » Меню с эффектом "лава-лампа" (Сердечки) на CSS