Как создать меню сайта с метаморфозами SVG

Как говорил уже ранее, на этой неделе я хочу максимально уделить внимание навигации. Сегодня речь пойдет о создании замечательного, минималистического меню сайта с метаморфозами, идея которого заключается в том,что при наведении курсора мыши на активный пункт происходит анимация, как в старых лава лампах, каждый пункт будет выделяться отдельным объектом и метаморфозами, смотрится очень круто и необычно, также навигация будет полностью адаптивной, что позволит хорошо смотреться на мобильных устройствах.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Как по мне, такое меню отлично подойдет для сайтов с белым однородным фоном, ну или черным, на примере мы решили попробовать черный фон. Ну а если вы хотите скачать сразу готовые шаблоны то можете посетить наших партнеров:

Шаг 1. HTML

После того как вы подключили все скрипты к странице то вам нужно создать разметку с неупорядоченным списком, у нас она будет выглядеть следующим образом:

<li class="menu-item js-menu-item is-active" data-morph="M 418.1,159.8 C 460.9,222.9 497,321.5 452.4,383.4 417.2,432.4 371.2,405.6 271.3,420.3 137.2,440 90.45,500.6 42.16,442.8 -9.572,381 86.33,289.1 117.7,215.5 144.3,153.4 145.7,54.21 212.7,36.25 290.3,15.36 373.9,94.6 418.1,159.8 Z"><a href="#0">Главная</a></li>
<li class="menu-item js-menu-item" data-morph="M 402.7,215.5 C 433.9,280.4 488.1,367.2 447.7,426.8 410.1,482.2 316.7,460.2 249.7,460.6 182.8,461.1 88.08,485.5 51.26,429.5 10.29,367.3 73.19,279.4 106.9,213 141.8,144 176.6,33.65 253.9,33.7 332.2,33.75 368.8,144.9 402.7,215.5 Z"><a href="#0">О нас</a></li>
<li class="menu-item js-menu-item" data-morph="M 451.5,185.8 C 441.5,266.2 339.6,305 272.3,350.2 207.7,393.6 226.7,444.7 182.6,447.9 132.8,451.4 83.97,399.9 66.37,353.1 34.6,268.4 41.16,141.8 112,85.44 186.1,26.329999999999984 313.8,54.099999999999994 396,101.4 425.2,118.2 455.6,152.4 451.5,185.8 Z">
<a href="#0">Виджеты</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Скачать</a></li>
<li class="menu-item"><a href="#0">Подобрать</a></li>
<li class="menu-item"><a href="#0">Инструкция</a></li>
</ol>
</li>

<li class="menu-item js-menu-item is-active" data-morph="M 418.1,159.8 C 460.9,222.9 497,321.5 452.4,383.4 417.2,432.4 371.2,405.6 271.3,420.3 137.2,440 90.45,500.6 42.16,442.8 -9.572,381 86.33,289.1 117.7,215.5 144.3,153.4 145.7,54.21 212.7,36.25 290.3,15.36 373.9,94.6 418.1,159.8 Z"><a href="#0">Главная</a></li>

<a href="#0">Виджеты</a>

<li class="menu-item"><a href="#0">Скачать</a></li>

<li class="menu-item"><a href="#0">Подобрать</a></li>

<li class="menu-item"><a href="#0">Инструкция</a></li>

</ol>

</li>

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

Шаг 2. СSS

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

.menu {
position: relative;
padding: 30px 0;
}
.menu > ol {
display: flex;
}
@media only screen and (max-width: 800px) {
.menu > ol {
display: block;
}
}
.menu > ol > .menu-item {
display: inline-block;
position: relative;
}
@media only screen and (max-width: 800px) {
.menu > ol > .menu-item {
display: block;
}
}
.menu > ol > .menu-item:hover .sub-menu {
opacity: 1;
}
.menu > ol > .menu-item:hover .sub-menu li:nth-child(1) {
animation-name: subMenuAnimation;
animation-duration: 300ms;
animation-delay: 100ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.menu > ol > .menu-item:hover .sub-menu li:nth-child(2) {
animation-name: subMenuAnimation;
animation-duration: 300ms;
animation-delay: 200ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.menu > ol > .menu-item:hover .sub-menu li:nth-child(3) {
animation-name: subMenuAnimation;
animation-duration: 300ms;
animation-delay: 300ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.menu > ol > .menu-item > a {
color: #fff;
text-decoration: none;
font-size: 2.5vw;
font-weight: 700;
letter-spacing: 1px;
margin: 0 25px;
display: block;
}
@media only screen and (max-width: 800px) {
.menu > ol > .menu-item > a {
margin: 30px 0;
font-size: 30px;
}
}
.menu > ol > .menu-item .sub-menu {
padding: 28px 25px 0;
position: absolute;
left: 0;
opacity: 0;
}
@media only screen and (max-width: 800px) {
.menu > ol > .menu-item .sub-menu {
left: 100%;
top: -32px;
}
}
.menu > ol > .menu-item .sub-menu li {
opacity: 0;
}
.menu > ol > .menu-item .sub-menu li a {
color: #fff;
text-decoration: none;
font-size: 1vw;
font-weight: 400;
letter-spacing: 1px;
margin: 12px 0;
display: block;
white-space: nowrap;
text-transform: uppercase;
transition: color 0.3s cubic-bezier(0.13, 1.07, 0.84, 1);
}
@media only screen and (max-width: 1080px) {
.menu > ol > .menu-item .sub-menu li a {
font-size: 13px;
}
}
.menu > ol > .menu-item .sub-menu li a:hover {
color: #f34ea4;
}
.menu .menu-shape {
position: absolute;
left: -62px;
top: -55px;
z-index: -1;
}
@media only screen and (max-width: 1440px) {
.menu .menu-shape {
left: -32px;
}
}
@media only screen and (max-width: 1180px) {
.menu .menu-shape {
left: -15px;
top: -62px;
}
}
@media only screen and (max-width: 800px) {
.menu .menu-shape {
left: -35px;
}
}
.menu .menu-shape svg {
position: relative;
display: block;
width: 10vw;
height: 10vh;
min-height: 150px;
margin: 0 auto;
}
@media only screen and (max-width: 800px) {
.menu .menu-shape svg {
width: 80px;
height: 80px;
}
}[php]
<p style="text-align: justify;">Теперь нам необходимо показать небольшую анимацию когда в меню есть выпадающий список с под меню, делаем мы это следующим образом:</p>
[php]@keyframes subMenuAnimation {
0% {
opacity: 0;
transform: translateX(-30px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

.menu {

position: relative;

padding: 30px 0;

}

.menu > ol {

display: flex;

}

@media only screen and (max-width: 800px) {

.menu > ol {

display: block;

}

.menu > ol > .menu-item {

display: inline-block;

position: relative;

}

@media only screen and (max-width: 800px) {

.menu > ol > .menu-item {

display: block;

}

.menu > ol > .menu-item:hover .sub-menu {

opacity: 1;

}

.menu > ol > .menu-item:hover .sub-menu li:nth-child(1) {

animation-name: subMenuAnimation;

animation-duration: 300ms;

animation-delay: 100ms;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

}

.menu > ol > .menu-item:hover .sub-menu li:nth-child(2) {

animation-name: subMenuAnimation;

animation-duration: 300ms;

animation-delay: 200ms;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

}

.menu > ol > .menu-item:hover .sub-menu li:nth-child(3) {

animation-name: subMenuAnimation;

animation-duration: 300ms;

animation-delay: 300ms;

animation-timing-function: ease-in-out;

animation-fill-mode: forwards;

}

.menu > ol > .menu-item > a {

color: #fff;

text-decoration: none;

font-size: 2.5vw;

font-weight: 700;

letter-spacing: 1px;

margin: 0 25px;

display: block;

}

@media only screen and (max-width: 800px) {

.menu > ol > .menu-item > a {

margin: 30px 0;

font-size: 30px;

}

.menu > ol > .menu-item .sub-menu {

padding: 28px 25px 0;

position: absolute;

left: 0;

opacity: 0;

}

@media only screen and (max-width: 800px) {

.menu > ol > .menu-item .sub-menu {

left: 100%;

top: -32px;

}

.menu > ol > .menu-item .sub-menu li {

opacity: 0;

}

.menu > ol > .menu-item .sub-menu li a {

color: #fff;

text-decoration: none;

font-size: 1vw;

font-weight: 400;

letter-spacing: 1px;

margin: 12px 0;

display: block;

white-space: nowrap;

text-transform: uppercase;

transition: color 0.3s cubic-bezier(0.13, 1.07, 0.84, 1);

}

@media only screen and (max-width: 1080px) {

.menu > ol > .menu-item .sub-menu li a {

font-size: 13px;

}

.menu > ol > .menu-item .sub-menu li a:hover {

color: #f34ea4;

}

.menu .menu-shape {

position: absolute;

left: -62px;

top: -55px;

z-index: -1;

}

@media only screen and (max-width: 1440px) {

.menu .menu-shape {

left: -32px;

}

@media only screen and (max-width: 1180px) {

.menu .menu-shape {

left: -15px;

top: -62px;

}

@media only screen and (max-width: 800px) {

.menu .menu-shape {

left: -35px;

}

.menu .menu-shape svg {

position: relative;

display: block;

width: 10vw;

height: 10vh;

min-height: 150px;

margin: 0 auto;

}

@media only screen and (max-width: 800px) {

.menu .menu-shape svg {

width: 80px;

height: 80px;

}

}[php]

<p style="text-align: justify;">Теперь нам необходимо показать небольшую анимацию когда в меню есть выпадающий список с под меню, делаем мы это следующим образом:</p>

[php]@keyframes subMenuAnimation {

0% {

opacity: 0;

transform: translateX(-30px);

}

100% {

opacity: 1;

transform: translateX(0px);

}

Шаг 3. JS

Нам необходимо запустить всю анимацию, и заставить ее реагировать на действия пользователей с плавной анимацией, а делаем мы это благодаря следующим функциям js:

function hoverAnimation() {
var menuItemsShape = $(".js-shape"),
linksWrapper = $(".js-menu-items-wrapper"),
linksItems = $(".js-menu-item"),
activeItem = $(".js-menu-item.is-active"),
activeItemPosition = activeItem.position().top,
menuItemsShapePath = $(".js-items-shape-path"),
info = $(".js-info");

TweenMax.set(menuItemsShape, {
y: activeItemPosition
});

linksItems.on({
mouseenter: function() {
_self = $(this);
var selfParent = _self.closest(linksWrapper),
targetCircle = selfParent.find(menuItemsShape),
circlePosition;

if ($(window).width() < 800) {
circlePosition = _self.position().top;
TweenMax.to(targetCircle, 0.6, {
y: circlePosition,
ease: Power2.easeOut
});
} else {
circlePosition = _self.position().left;
TweenMax.to(targetCircle, 0.6, {
x: circlePosition,
ease: Power2.easeOut
});
}

TweenMax.to(menuItemsShapePath, 1, { morphSVG: this.dataset.morph });
}
});

linksWrapper.on({
mouseleave: function() {
_self = $(this);
var selfParent = _self.closest(linksWrapper),
activeLink = selfParent.find(activeItem),
targetCircle = selfParent.find(menuItemsShape),
activeLinkPosition = activeLink.position().top;

if ($(window).width() < 800) {
TweenMax.to(targetCircle, 0.6, {
y: activeLinkPosition,
ease: Power2.easeOut
});
} else {
TweenMax.to(targetCircle, 0.6, {
x: activeLinkPosition - 32,
ease: Power2.easeOut
});
}

TweenMax.to(menuItemsShapePath, 1, { morphSVG: menuItemsShapePath });
}
});

$(window).resize(function() {
info.show();
});
}

hoverAnimation();

function hoverAnimation() {

var menuItemsShape = $(".js-shape"),

linksWrapper = $(".js-menu-items-wrapper"),

linksItems = $(".js-menu-item"),

activeItem = $(".js-menu-item.is-active"),

activeItemPosition = activeItem.position().top,

menuItemsShapePath = $(".js-items-shape-path"),

info = $(".js-info");

TweenMax.set(menuItemsShape, {

y: activeItemPosition

});

linksItems.on({

mouseenter: function() {

_self = $(this);

var selfParent = _self.closest(linksWrapper),

targetCircle = selfParent.find(menuItemsShape),

circlePosition;

if ($(window).width() < 800) {

circlePosition = _self.position().top;

TweenMax.to(targetCircle, 0.6, {

y: circlePosition,

ease: Power2.easeOut

});

} else {

circlePosition = _self.position().left;

TweenMax.to(targetCircle, 0.6, {

x: circlePosition,

ease: Power2.easeOut

});

}

TweenMax.to(menuItemsShapePath, 1, { morphSVG: this.dataset.morph });

}

});

linksWrapper.on({

mouseleave: function() {

_self = $(this);

var selfParent = _self.closest(linksWrapper),

activeLink = selfParent.find(activeItem),

targetCircle = selfParent.find(menuItemsShape),

activeLinkPosition = activeLink.position().top;

if ($(window).width() < 800) {

TweenMax.to(targetCircle, 0.6, {

y: activeLinkPosition,

ease: Power2.easeOut

});

} else {

TweenMax.to(targetCircle, 0.6, {

x: activeLinkPosition - 32,

ease: Power2.easeOut

});

}

TweenMax.to(menuItemsShapePath, 1, { morphSVG: menuItemsShapePath });

}

});

$(window).resize(function() {

info.show();

});

}

hoverAnimation();

Спасибо за работу Dejan Babić. Его работы можете просмотреть в документе к исходным материалам. Всем спасибо и удачных экспериментов.

Как создать меню сайта с метаморфозами SVG

Шаг 1. HTML

Шаг 2. СSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Как создать меню сайта с метаморфозами SVG

Шаг 1. HTML

Шаг 2. СSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи