Как реализовать «хлебные крошки» с длинными названиями?

Question

[Rodiosha]

Коллеги! подскажите, плз, как реализовать на сайте (и на мобильной версии ОСОБЕННО) хлебные крошки, в случае длинных названий разделов и подразделов...
Может есть примерчики удачные...

Comments

[dollar]

Мелкий шрифт. Отсутствие боковых панелей. Резина на всю ширину.
Но длинные названия - уже плохо. Только самое последнее (название статьи) может быть длинным, его можно перенести на следующую строку. Но лучше его вообще не включать в крошки.

[Rodiosha]

dollar, если речь идет о спец. технич областях, есть случаи, когда длинное название сложно сократить

[alex-1917]

Rodiosha, возможно да, но обычно сами подразделы можно и нужно сокращать, т.е. хранить для разделов-подразделов не только полное название, но и короткие, можно еще в СЕО использовать.

[alex-1917]

Rodiosha, а что, для спец. технич. обл-ей нужен магазин?))) там сидят ботаны на ие9 и кинескопных мониторах, для них всяко делать без всяких мобильных шаблонов)))

Answer 1

[Александр Цымбал]

Задать максимальную допустимую ширину длинным пунктам хлебных крошек. Для каждого разрешения (моб/десктоп) можно отрегулировать максимальную ширину, чтобы умещалось по 2-3 пункта в строку. Это уже дело техники. Такой способ 100% поможет избежать непредсказуемых растягиваний.

Answer 2

[A K]

• Горизонтальный скролл
  
• Вертикальное размещение:
  

  ↳ Home
  ↳ Wines
  ↳ White wines
  ↳ Chardonnay

  
  
  

Answer 3

[Андрей]

Видел в буржунете решение с заворачиванием каждой секции крошек в span с ограничением дины через css и докруткой js многоточья в отсекаемой части текста крошек.

Типа:
Домой > Категория од.... > Подкатегори... > Товар

По мне так вполне юзабильно и ПС путь индексируют, в т.ч. с макроразметкой.

2-й вариант - о5 таки через css присваиваем класс с visible: none; и вместо текста подаем иконку.

Answer 4

[lagudal]

Как раз решаю сейчас подобную проблему - Как лучше поступить с breadcrumbs на мобильных девайсах? - очень длинные названия категорий и особенно продуктов в breadcrumbs, на мобильных вообще все ужасно.
Выбрал из предложенных один вариант - чуть его преобразовываю сейчас -
https://codepen.io/lagudal/pen/KxGpQj
Главная проблема - то что в реальной мобильной версии нет hover, вернее, он работает не так как в десктопной.
Т.е. если знаешь, что надо осторожненько нажать и держать, чтобы раскрыть, а потом уже кликать, если есть необходимость. Проблема, что прикосновение, даже очень нежное, очень уж часто есть сразу клик.
Кстати, такая же точно проблема, когда пункт верхнего уровня дропдаун-меню сам содержит ссылку, например, на категорию, а не только hover по нему раскрывает вложенные уровни меню с подкатегориями.
Есть мысль, прикрутить класс или id, который будет добавляться только на разрешениях для таблет и мобайл, а на этот класс или id повесить посредством js события - по первому клику на элемент - раскрыть элемент, по второму или последующим кликам - уже перейти по ссылке.

Answer 5

[Евгений Юдин]

Как вариант - с помощью js или css сокращать слова до ширины экрана. Вот пример - sv-mebel-sochi.ru/catalog/maki
Так компьютер - take.ms/LTpOD
Так мобильная версия - take.ms/i8CJp

Comments

[alex-1917]

Как по мне, но кухни с фотопечатью маки имхо избыточно... В крошках такие "сложные" сочетания реализуются так:
Кухни-> Фотопечать -> Маки. Тут сыграет идеология крошек - одно за одним, т.е. логически пользователь поймет что Фотопечать лежит внутри Кухни... Хотя именно на вашем скрине крошки сделаны безобразно, выглядит вообще как список равнозначных подразделов. Стрелочки стрелочки решают.