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

 

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

Шаг 1. HTML

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

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

Шаг 2. СSS

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

Шаг 3. JS

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

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

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