Все для веб-дизайнера
Как создать меню сайта с метаморфозами SVG
Как говорил уже ранее, на этой неделе я хочу максимально уделить внимание навигации. Сегодня речь пойдет о создании замечательного, минималистического меню сайта с метаморфозами, идея которого заключается в том,что при наведении курсора мыши на активный пункт происходит анимация, как в старых лава лампах, каждый пункт будет выделяться отдельным объектом и метаморфозами, смотрится очень круто и необычно, также навигация будет полностью адаптивной, что позволит хорошо смотреться на мобильных устройствах.
Как по мне, такое меню отлично подойдет для сайтов с белым однородным фоном, ну или черным, на примере мы решили попробовать черный фон. Ну а если вы хотите скачать сразу готовые шаблоны то можете посетить наших партнеров:
Шаг 1. HTML
После того как вы подключили все скрипты к странице то вам нужно создать разметку с неупорядоченным списком, у нас она будет выглядеть следующим образом:
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
Каждый пункт имеет свой класс и параметр для плагина который отвечает за метаморфозы графики SVG, более детально можете посмотреть в исходниках.
Шаг 2. СSS
Для нашего меню будут небольшие классы, для мы определяем классы для правильного отображения и позиционирования пунктов и подпунктов на странице, параллельно этому мы устанавливаем медиазапросы для адаптивности.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
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ć. Его работы можете просмотреть в документе к исходным материалам. Всем спасибо и удачных экспериментов.
Вот и все. Готово!
| Опубликовал Cooper 03.07.2018 в 13:03, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
