65  /  381

Цепочка навигации

Просмотров: 5085
Дата последнего изменения: 05.08.2020
Роберт Басыров
Сложность урока:
2 уровень - несложные понятия и действия, но не расслабляйтесь.
1
2
3
4
5
Недоступно в редакциях:
Ограничений нет

Цепочка навигации позволяет пользователю ориентироваться, где на сайте он находится в данный момент. Она очень полезна при разветвленной структуре сайта.

Размещение компонента

  • Откройте для редактирования шаблон тестового сайта.
  • Найдите и удалите код, имитирующий цепочку навигации на шаблоне сайта, расположенную между
    <!-- #Begin_nav -->
    <!-- #End_nav -->
  • Перенесите на место между метками код вызова компонента Навигационная цепочка Компонент выводит навигационную цепочку в шаблоне.

    Описание компонента «Навигационная цепочка» в пользовательской документации.
    (breadcrumb) из документации.

Кастомизация шаблона

Цепочка отображена, но ее вид не соответствует оформлению сайта. Повторим процесс «подгонки». Правда, оговоримся сразу, активную ссылку красным (как это у нас в дизайне) можно сделать только в том случае, если в шаблоне написать условие php: если ссылка последняя, то выделить цветом. Мы этим заниматься не будем, пусть это будет домашним заданием. Поэтому последняя ссылка останется у нас серой.

Примечание: последнюю ссылку можно выделять с помощью CSS, используя псевдокласс: last-child.

  • Скопируйте шаблон Цепочки навигации.
  • Откройте для редактирования файл CSS.
  • Используя за основу файл CSS левого меню, отредактируйте отображение Цепочки навигации.
10
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии