Как реализовать данное поведение?

Question

[drDru]

Нужно реализовать что то такое, Хлебные крошки.

По нажатию на 1ый элемент 1ой колонки он выделяется цветом. При нажатии на следующих элементах в других колонках, они соединяются линиями.
Пытался реализовать псевдоэлементами, с бордерами border-top, border-left...)Посчитал, что линии нужны пунктиром, поэтому взял за основу именно бордеры... Но захожу в тупик далее.. И мысли что я что то делаю не так... Каким образом это реализовывается? намекните пожалуйста.

Answer 1

[origami1024]

Делать змейки проще всего думаю через svg.
На каждое подменю кроме 1го предусмотреть по 1ой змейке из 3х элементов.
1ая часть двигается в зависимости от предыдущего выбранного
3ая часть двигается в зависимости от выбираемого
2ая - средняя часть - координаты концов завязаны на координаты концов 1ой и 2ой части.

Вот ради спорта сделал вариант бордером

Comments

[drDru]

Привет, а подскажи, есть вариант для незнающего svg? Пускай долгий и упорный

[origami1024]

drDru, в самом свг нужна только горизонтальная линия либо вертикальная линия, можешь и другими элементами сделать

[origami1024]

<svg width="100px" height="4" viewBox="0 0 100 4">
    <line x1="0" x2="100" y1="1" y2="3" stroke="#5184AF" stroke-width="2"  stroke-dasharray="5, 2"  />
</svg>

[drDru]

origami1024, А без свг это можно как то реализовать?
Например теми же бордерами внутри псевдов, и псевдоэлементы позицонировать

Answer 2

[aftar]

Как вариант
Текст оборачиваешь в span и background: #fff;
Делаешь линию в svg. При клике добавляешь класс. И у него делаешь псевдоэлемент с заливкой url svg. вот ссылка для конвертирования.

У текста

padding: 10px 5px 20px;
position: relative;

У псевда

position: absolute;
right: 0;
left: 0;
height: ...;
background: url(...) center right no-repeat;

background у спана будет прерывать линию.