@drDru

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

Нужно реализовать что то такое, Хлебные крошки.
5f08879469cf0190109639.png
По нажатию на 1ый элемент 1ой колонки он выделяется цветом. При нажатии на следующих элементах в других колонках, они соединяются линиями.
Пытался реализовать псевдоэлементами, с бордерами border-top, border-left...)Посчитал, что линии нужны пунктиром, поэтому взял за основу именно бордеры... Но захожу в тупик далее.. И мысли что я что то делаю не так... Каким образом это реализовывается? намекните пожалуйста.
  • Вопрос задан
  • 104 просмотра
Пригласить эксперта
Ответы на вопрос 2
origami1024
@origami1024
went out for a night walk
Делать змейки проще всего думаю через svg.
На каждое подменю кроме 1го предусмотреть по 1ой змейке из 3х элементов.
1ая часть двигается в зависимости от предыдущего выбранного
3ая часть двигается в зависимости от выбираемого
2ая - средняя часть - координаты концов завязаны на координаты концов 1ой и 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 у спана будет прерывать линию.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
RUVOD Москва
от 150 000 до 200 000 ₽
iSpring Йошкар-Ола
от 80 000 до 130 000 ₽
Fora Soft Санкт-Петербург
от 80 000 до 130 000 ₽
03 авг. 2020, в 15:19
5000 руб./за проект
03 авг. 2020, в 15:13
7000 руб./за проект
03 авг. 2020, в 15:06
10000 руб./за проект