Мобильная версияЯ создал небольшую временную шкалу с помощью CSS.
По сути, он создает вертикальную линию между элементами списка, используя ::before.
Мой следующий шаг – попытаться анимировать эту строку цветовой заливкой сверху до текущего выбранного элемента списка.
Я не знаю, возможно ли это, судя по моей разметке, но я подумал, что кто-нибудь здесь может подсказать мне несколько идей.
nav { положение: фиксированное; верх: 20%; внизу: авто; z-индекс: 10; } ул { стиль списка: нет; заполнение: 0; } ли { отступ: 20 пикселей 0; } охватывать { дисплей: гибкий; положение: относительное; } нав li::after { содержание: ''; позиция: абсолютная; осталось: 50%; верх: 0; внизу: 0; ширина: 2 пикселя; цвет фона: #fff; /* Цвет линии */ преобразование: TranslateX (-50%); z-индекс: -1; } навигация ул { дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; } навигация { отображение: встроенный блок; цвет: #272727; текстовое оформление: нет; размер шрифта: 1em; } .первый { верх: -70 пикселей; } .второй { верх: -20 пикселей; } .четвертый { верх: 30 пикселей } .последний { верх: 50 пикселей; } .круг { высота: 10 пикселей; ширина: 10 пикселей; граница-радиус: 50%; цвет фона: #fff; переход: высота 0,5с, легкость; переход: ширина 0,5 с, легкость; } .rect { высота: 3 пикселя; ширина: 0 пикселей; слева: 0; внизу: 4 пикселя; цвет фона: #272727; -webkit-transition: -webkit-transform 0,6 с, ширина 1 с; -moz-transition: -webkit-transform 0,6 с, ширина 1 с; переход: преобразование 0,6 с, ширина 1 с; } навигация: наведите курсор, nav .active-section { цвет: #9b59b6; } nav a: диапазон наведения, nav .active-section span { цвет фона: #29aae2;
Существует также JavaScript, который добавляет прокрутку к разделу и активный класс к якорной ссылке.
Рабочий пример можно найти здесь: https://codepen.io/Jonny-Quinn/pen/RwEEMod
Любые идеи будут приветствоваться.
