Как такое сверстать?

Здравствуйте!

Сижу, головку ломаю..

Есть вот такой блок:
5f512d2cd5331630866964.png

При клике на центральную точку (с синей заливкой) должно произойти так:
5f512d5cb0c6c412126994.png

И в догонку к этому еще и скроллбар (Когда элементов в списке много)..

Жесть какая-то.. никому не попадалось что-то подобное?
  • Вопрос задан
  • 318 просмотров
Решения вопроса 2
hzzzzl
@hzzzzl
аккуратно шаг за шагом всё стилизовать и анимировать



итд,
Тут просто рутина
Ответ написан
GennadyS
@GennadyS
Программист, философ
А в чем проблема-то? Верстайте отдельные блоки, в которых полоса и круг по центру, сверху требуемый текст, и т.д., задайте блоку разные CSS-состояния, .step-completed, .step-selected, .step.-empty, .step-hidden, .step-first, .step-last и т.д., немного напишите на JS, чтобы при клике менять классы.

Чтобы блоки прокручивались по необходимости, их нужно завернуть в еще один блок, которому задать свойство: overflow: visible (потомкам inline-block или с flex-column & flex-wrap: nowrap), а его завернуть в еще один, которому ограничить ширину и задать свойство overflow-x: auto, это классический подход.

Тут просто рутина, какие-то под-задачи может вызовут вопросы, но если что, пишите в комментарии.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@twentytvvo
Как это сделать по людски:
  1. Сверстать статику на HTML, CSS.
  2. Стилизовать анимацию в CSS.
  3. Скриптовать нажатия и смену стилей в JS.


Вариант для ленивых или для халтуры:
Найти похожее на https://codepen.io/ и допилить под себя.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы