Красивая навигация на Vue

 

Проблема

На сайте http://touchemod.vadimcpp.ru/ реализована красивая навигация:

• плавный скроллинг;
• подсветка текущего раздела;
• закрепление вверху экрана.

Необходимо реализовать такую же навигацию, только на движке Vue.js.

Исследование

Какая есть информация в интернете?

Первым делом приступил к обзору информации в интернете. Информации дофига. Изначально тут было много ссылок на Vue сайты, но толку не было. Решил приступить к кодингу 🙂

Кодинг

Так как уровень знаний Vue - базовый, буду использовать только простые решения. Такое решение - vue-fixed-header. Используя css стили буду изменять цвета и размеры элементов. Будет клево.

Кнопки делаю цветными, указываю оранжевый цвет. При наведении курсора мышки применяю эффект saturate. Material дизайн показывает, как приподнять кнопку над канвасом.

Улучшим текст заголовка. Добавим оранжевую тень. Теперь заголовок видно на светлом и темном фоне.

Теперь приступим к маленьким экранам. На смартфоне навигация будет выглядеть иначе.  В правом верхнем углу экрана разместим гамбургер. Это такая кнопка из трех горизонтальных полосок 🍔

На мобильных устройствах навигация выглядит так:

Не хватает выпадающего меню. Не нашел в интернете хорошего, годного к употреблению компонента. Написал свой:

Исходники показать не могу, ссылка на сайт будет позже.

Итого

Среди всего множества библиотек не смог найти готовое решение и изобрел велосипед снова. Мой велосипед состоит из таких частей:

• выпадающий список и гамбургер в мобльной версии;
• никаких выпадающих списков в десктопной версии;
• при скроллинге навигация закрепляется наверху экрана.

Исходники показать не могу.

Другие статьи

Хотелось сделать нечто похожее на Scroll Header. Когда я использую этот компонент в своей работе, я напишу об этом отдельно.