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

Question

[Александр Осадчий]

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

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

Есть вот такой блок:


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


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

Жесть какая-то.. никому не попадалось что-то подобное?

Answer 1

[hzzzzl]

аккуратно шаг за шагом всё стилизовать и анимировать



итд,

Тут просто рутина

Comments

[Александр Осадчий]

Вообще круто - спасибо большое!

Answer 2

[Gennady S]

А в чем проблема-то? Верстайте отдельные блоки, в которых полоса и круг по центру, сверху требуемый текст, и т.д., задайте блоку разные 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, это классический подход.

Тут просто рутина, какие-то под-задачи может вызовут вопросы, но если что, пишите в комментарии.

Answer 3

[twentytvvo]

Как это сделать по людски:

1. Сверстать статику на HTML, CSS.
   
2. Стилизовать анимацию в CSS.
   
3. Скриптовать нажатия и смену стилей в JS.
   
   

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