Работа с меню в 1С-Битрикс

Август 7, 2022

Главная
Информатика
Работа с меню в 1С-Битрикс

Содержание

2. Навигация по сайту в большинстве случаев происходит с помощью меню, поэтому так важно знать, как адаптировать
3. Для начала добавим компонент «меню» на тестовую страницу Начало создания меню
4. Укажем параметры: тип меню - верхнее, уровень вложенности – 2, шаблон «горизонтальное многоуровневое». Новый компонент
5. Так как мы планируем изменять шаблон компонента, скопируем его! При копировании шаблона введем ему новое имя.
6. Откроем наш шаблон компонента в папке, куда мы его сохранили, затем изменим его следующим образом и
7. После проведенных операций меню стало уже значительно ближе к верстке! Результат изменений
8. Скопируем вызов компонента со странице и заменим наше верхнее меню на него в файле header.php! Внедрение
9. Выставим пункты меню, как было в верстке, первым пунктом вставим ссылку на главную страницу Выставление пунктов
10. Для этого воспользуемся редактированием меню через административный раздел, изменим параметры первого пункта и вставим в него
11. Посмотрим, что у нас получилось! Результат работы с меню
12. Внедрение компонента «цепочка навигации» происходит примерно аналогично: Добавляем компонент на тестовую страницу Копируем шаблон компонента Вносим
13. После изменений будет выглядеть следующим образом: Файл компонента «навигационная цепочка»
14. Когда будете создавать боковое меню, попробуйте добавить в него следующий код и посмотрите, что получится! Подсказка
15. Верхнее меню, с помощью компонента «меню». Должно строиться выпадающее меню, как это задано в исходном HTML
17. Скачать презентацию

Слайд 2

Навигация по сайту в большинстве случаев происходит с помощью меню, поэтому

так важно знать, как адаптировать шаблон этого компонента под используемую верстку, в этом уроке мы разберемся с работой компонента типа «меню»

Меню в 1С-Битрикс

Слайд 3

Для начала добавим компонент «меню» на тестовую страницу
Начало создания меню

Слайд 4

Укажем параметры: тип меню - верхнее, уровень вложенности – 2, шаблон

«горизонтальное многоуровневое».

Новый компонент

Слайд 5

Так как мы планируем изменять шаблон компонента, скопируем его! При копировании

шаблона введем ему новое имя.

Копирование шаблона

Слайд 6

Откроем наш шаблон компонента в папке, куда мы его сохранили, затем

изменим его следующим образом и удалим все лишние файлы из шаблона компонента

Начальные изменения

Слайд 7

После проведенных операций меню стало уже значительно ближе к верстке!
Результат изменений

Слайд 8

Скопируем вызов компонента со странице и заменим наше верхнее меню на

него в файле header.php!

Внедрение компонента в верстку

Слайд 9

Выставим пункты меню, как было в верстке, первым пунктом вставим ссылку

на главную страницу

Выставление пунктов меню

Слайд 10

Для этого воспользуемся редактированием меню через административный раздел, изменим параметры первого

пункта и вставим в него картинку, которая есть по умолчанию, нужные изменения в шаблон мы уже внесли

Добавление иконки пункта
«на главную»

Слайд 11

Посмотрим, что у нас получилось!
Результат работы с меню

Слайд 12

Внедрение компонента «цепочка навигации» происходит примерно аналогично:
Добавляем компонент на тестовую страницу
Копируем

шаблон компонента
Вносим изменения в шаблон компонента
Переносим код вызова компонента в шаблон сайта

Внедрение навигационной цепочки

Слайд 13

После изменений будет выглядеть следующим образом:
Файл компонента
«навигационная цепочка»

Слайд 14

Когда будете создавать боковое меню, попробуйте добавить в него следующий код

и посмотрите, что получится!

Подсказка для практики

Слайд 15

Верхнее меню, с помощью компонента «меню». Должно строиться выпадающее меню, как

это задано в исходном HTML шаблоне.
Меню о магазине (в подвале). Создать тип меню «О магазине», в шаблоне компонента меню фразу «О магазине» вынести в LANG файл. Добавить в меню следующие пункты Отзывы, Контакты, Руководство, История. Ссылки с пунктов меню должны быть правильными.
Реализовать функции сайта внедрить компоненты в шаблон внутренней страницы в header
Цепочка навигации, компонент «Навигационная цепочка».
Левое меню, компонент «Меню». За основу взять стандартный шаблон «vertical_multilevel», алгоритм в этом шаблоне подходит для построения шаблона по заданию, необходим о внедрить в него всю верстку.

Практическое задание