@Rodiosha

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

Коллеги! подскажите, плз, как реализовать на сайте (и на мобильной версии ОСОБЕННО) хлебные крошки, в случае длинных названий разделов и подразделов...
Может есть примерчики удачные...
  • Вопрос задан
  • 3496 просмотров
Пригласить эксперта
Ответы на вопрос 5
AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su
Задать максимальную допустимую ширину длинным пунктам хлебных крошек. Для каждого разрешения (моб/десктоп) можно отрегулировать максимальную ширину, чтобы умещалось по 2-3 пункта в строку. Это уже дело техники. Такой способ 100% поможет избежать непредсказуемых растягиваний.

Ответ написан
Комментировать
Symphony
@Symphony
  • Горизонтальный скролл
  • Вертикальное размещение:
    ↳ Home
    ↳ Wines
    ↳ White wines
    ↳ Chardonnay


Ответ написан
Комментировать
KeySVG
@KeySVG
аниматор svg / html5
Видел в буржунете решение с заворачиванием каждой секции крошек в span с ограничением дины через css и докруткой js многоточья в отсекаемой части текста крошек.

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

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

2-й вариант - о5 таки через css присваиваем класс с visible: none; и вместо текста подаем иконку.
Ответ написан
Комментировать
@lagudal
Как раз решаю сейчас подобную проблему - Как лучше поступить с breadcrumbs на мобильных девайсах? - очень длинные названия категорий и особенно продуктов в breadcrumbs, на мобильных вообще все ужасно.
Выбрал из предложенных один вариант - чуть его преобразовываю сейчас -
https://codepen.io/lagudal/pen/KxGpQj
Главная проблема - то что в реальной мобильной версии нет hover, вернее, он работает не так как в десктопной.
Т.е. если знаешь, что надо осторожненько нажать и держать, чтобы раскрыть, а потом уже кликать, если есть необходимость. Проблема, что прикосновение, даже очень нежное, очень уж часто есть сразу клик.
Кстати, такая же точно проблема, когда пункт верхнего уровня дропдаун-меню сам содержит ссылку, например, на категорию, а не только hover по нему раскрывает вложенные уровни меню с подкатегориями.
Есть мысль, прикрутить класс или id, который будет добавляться только на разрешениях для таблет и мобайл, а на этот класс или id повесить посредством js события - по первому клику на элемент - раскрыть элемент, по второму или последующим кликам - уже перейти по ссылке.
Ответ написан
Комментировать
RotgarSett
@RotgarSett
SEO Эксперт
Как вариант - с помощью js или css сокращать слова до ширины экрана. Вот пример - sv-mebel-sochi.ru/catalog/maki
Так компьютер - take.ms/LTpOD
Так мобильная версия - take.ms/i8CJp
Ответ написан
Ваш ответ на вопрос

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

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