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

 

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

Как создать меню сайта с использованием SVG. Пошаговая инструкция.

Шаг 1. HTML

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

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

Как создать меню сайта с использованием SVG

Шаг 2. СSS

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

Шаг 3. JS

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

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

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