Меню

Урок 104 из 328
Автор: Ольга Пичужкина
Сложность урока:
3 уровень - средняя сложность. Необходимо внимание и немного подумать.
3 из 5
Просмотров: 16311
Ограничения по редакциям: Ограничений нет

Меню на любой вкус

Разработка эффективного, то есть заметного, красивого, понятного и логичного меню - важнейшая задача контент-менеджера.

"1С-Битрикс: Управление сайтом" позволяет быстро создавать и редактировать различные варианты меню. В видеоролике демонстрируются общие принципы работы с меню.


Поговорим подробнее о видах и типах меню, их построении и показе.

Виды меню: статическое и динамическое

Как вы уже знаете, в "1С-Битрикс: Управление сайтом" информация делится на два вида - статическую Статическая информация - это информация, которая редко меняется с течением времени. Например, рекламные тексты, история компании, контактная информация. Статическая информация создается и редактируется вручную. Подробнее... и динамическую Динамическая информация - информация, хранимая в Базе Данных сайта и выводимая специальными компонентами системы. Как правило, это - часто изменяемая информация со множеством свойств. Подробнее... . Статическая вводится непосредственно на странице сайта, меняется редко и вручную. Динамическая размещается с помощью программного кода, меняется автоматически в зависимости от изменений в источнике данных - инфоблоке. Кроме того, эти два типа информации отличаются Изучите общее и отличия для двух типов информации. Понимание разницы между ними позволяет быстрее и оптимальнее решать задачи по наполнению сайта. Общее у обоих типов то, что редактирование в обоих случаях происходит одинаково: в Визуальном редакторе. А вот различий намного больше...

Подробнее ...
способами хранения, вывода и обработки.

Оба вида информации могут размещаться на одной физической странице.

Таким же образом и меню может быть статическим, динамическим или смешанным, т.е. содержать как динамические, так и статические пункты.

Какое меню вы будете создавать, зависит от ваших целей, того, что вы хотите в нём видеть.

Если вы хотите получить меню, из которого можно переходить в разделы или на страницы сайта - делайте статическое. Добавьте в меню названия разделов и страниц, пропишите ссылки на соответствующие файлы и папки из физической структуры Физическая структура - это порядок размещения
физических файлов в папках сайта на сервере.
В том числе файлов с программным кодом.
Мы рекомендуем работать с физической структурой с большой осторожностью.
Вы можете повредить системные файлы и всё сломается:).
сайта - и всё. Это очень просто и является несомненным плюсом статического меню.

Например, вы решили, что для главного меню хватит пунктов Новости, Как купить, Доставка, О магазине, Гарантия, Контакты:

stat_menu.png

Клик по какому-либо из пунктов переведет посетителя на соответствующую страницу сайта, где ему будет продемонстрирована информация в виде текстов, изображений, ссылок, фрагментов карты и т.п.

Но что, если в будущем нужно будет актуализировать меню - пунктов не хватит или появится новый раздел, новый файл в структуре? Кроме создания самой физической страницы, Вам придется вручную добавлять в меню новый пункт и ссылку на него. А в случае горизонтального меню может случиться, что добавляемый пункт не поместится на страницу по ширине - тогда придется переделывать верстку. Это, конечно, недостаток статического меню.

Если же вам нужно меню, которое будет автоматически меняться при изменении и добавлении информации в каталог товаров, услуг, статей, мероприятий - используйте динамическое. Клик по пункту меню будет переводить пользователя на раздел или элемент каталога. При этом, если раздел содержит несколько элементов, то вам не нужно создавать для каждого из них физическую страницу и хранить их в виде файлов. Страница будет сформирована программным кодом в момент обращения к ней. И значит, будет содержать актуальную информацию, а вам не придется следить за этим или вообще что-то менять в публичной части.

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

din_menu.png

Возможно также, что вы захотите совместить в одном меню разные типы информации. Например, перечень услуг вашей компании и контактную информацию. Контактная информация меняется редко, а вот услуги со временем могут появиться новые или какие-то больше не будут востребованы.

Такой вариант тоже возможен. Настройте компонент меню на вывод инфоблока услуг, и добавьте к нему статические пункты.

Типы меню: верхнее, левое и другие

Одним из правил хорошего тона при разработке сайтов является предсказуемость. Посетители уже давно привыкли, что меню на большинстве сайтов расположено вверху или слева. В Битриксе поддерживают хорошие традиции - по умолчанию в системе существует два типа меню: верхнее (основное) - тип top и левое - тип left.

А для поклонников оригинальности и креативности в системе не ограничивается число типов меню. Вы можете создать свой собственный тип меню в административном разделе на странице настроек модуля Управление структурой (Настройки > Настройки продукта > Настройки модулей > Управление структурой).

menu_types.jpg

Вы можете задать типы меню отдельно для каждого сайта с помощью опции Использовать индивидуальные настройки для каждого сайта.

Тип меню, заданный в настройках модуля Управления структурой, будет использован в названии файла с шаблоном меню Шаблон компонента - программный код, преобразующий данные, подготовленные компонентом, непосредственно в HTML-код. Подробнее... (например, top.menu_template.php), а также для определения файлов с пунктами меню (например, .top.menu.php). Кроме того, имя типа меню используется для подключения меню в шаблоне дизайна Шаблон дизайна — это внешний вид сайта, в котором определяется расположение различных элементов на сайте, художественный стиль и способ отображения страниц. Включает в себя программный HTML-код, графические элементы, таблицы стилей, дополнительные файлы для отображения контента. Может также включать в себя шаблоны компонентов, шаблоны готовых страниц и сниппеты. Подробнее... .

Компоненты в публичной части и файлы в структуре

Для вывода меню используется компонент Меню Компонент выводит меню указанного типа. Компонент является стандартным и входит в дистрибутив модуля.

В визуальном редакторе компонент расположен по пути: Служебные > Навигация > Меню.

Компонент относится к Главному модулю.

В поставку продукта входят следующие шаблоны компонента Меню (bitrix:menu):

• Горизонтальное многоуровневое выпадающее меню (Яркий) (horizontal_multilevel);
• Левое меню (Яркий) (left);
• Вертикальное меню по умолчанию (Встроенный шаблон) (.default);
• Голубое меню в виде закладок (Встроенный шаблон) (blue_tabs);
• Серое меню в виде закладок (Встроенный шаблон) (grey_tabs);
• Древовидное меню (Встроенный шаблон) (tree);
• Вертикальное многоуровневое выпадающее меню (Встроенный шаблон) (vertical_multilevel).
Описание компонента «Меню» в пользовательской документации.
. Его можно настроить как на работу с файлами и папками, так и на инфоблок. Также можно легко изменить внешний вид представления информации, выбрав другой шаблон в настройках компонента.

Для динамического чаще всего используется Пункты меню Компонент осуществляет дополнение созданного меню названиями разделов инфоблоков. Компонент является стандартным и входит в дистрибутив модуля.

В визуальном редакторе компонент расположен по пути: Служебные > Навигация > Пункты меню.

Компонент относится к модулю Информационные блоки.

Описание компонента «Пункты меню» в пользовательской документации.
. Но вообще говоря, для динамического меню можно использовать и некоторые другие компоненты, работающие с инфоблоками, например, Каталог Комплексный компонент осуществляет вывод полного каталога товаров из определенного инфоблока. Его функциональность объединяет возможности нескольких одностраничных компонентов: фильтра, компонента сравнения, вывода элементов раздела, топа элементов, связанных элементов и др. Расположив комплексный компонент на странице, можно получить полнофункциональный каталог. Компонент является стандартным и входит в дистрибутив модуля.

Внимание! Компонент не работает с инфоблоками, не имеющими структуры разделов. Если по логике проекта информация не должна иметь структурного деления, то необходимо создать один раздел верхнего уровня и уже в нём размещать элементы инфоблока.

В визуальном редакторе компонент расположен по пути Контент > Каталог > Каталог.

Компонент относится к модулю Информационные блоки.

Порядок секций в форме настройки компонента может меняться в зависимости от выбранного шаблона.

Описание компонента «Каталог (комплексный компонент)» в пользовательской документации.
, Новости Комплексный компонент позволяет создать новостной раздел на сайте. Доступен просмотр детальной информации, списка элементов, настройка экспорта в rss, организация голосования за новости (или другие элементы инфоблоков), настройка отзывов, вывода материалов по темам, настройки ЧПУ и многое другое. Компонент содержит 3 шаблона: .default, web20 и flat. Компонент стандартный и входит в дистрибутив модуля.

В визуальном редакторе компонент расположен по пути: Контент > Статьи и новости > Новости.

Компонент относится к модулю Информационные блоки.

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

В административном разделе каждому меню соответствует свой файл. Он должен быть размещен в папке раздела. Для статического меню он имеет название .тип_меню.menu.php. (однако в Менеджере файлов имя файла данных автоматически представляется в виде ссылки Меню типа "тип_меню"), а для динамического - .тип_меню.menu_ext.php.

name_files.jpg

Посмотрите видеоролик, где подробно показана разница между статическим и динамическим меню на нашем демо-сайте:

Наследование меню

Важно понять и запомнить: меню в системе является наследуемым.

Что это означает на практике?

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

Принцип такой - основное меню с главной страницы транслируется на все разделы, подразделы и страницы сайта с этим шаблоном дизайна. Меню раздела, в свою очередь, транслируется на подразелы и страницы.

Если в разделе, в котором не создано собственное меню, вы воспользуетесь командой "Редактировать пункты меню", то фактически перейдете к редактированию вышестоящего меню.

Например: посетитель находится в разделе /ru/company/vakansii/. Для показа меню типа left файл меню будет искаться в следующей последовательности:

  1. /ru/company/vakansii/
  2. /ru/company/
  3. /ru/
  4. /

Если в одном из каталогов будет найден файл меню, то поиск останавливается и в последующих каталогах уже не ищется.

Если в каком-либо разделе создано своё меню, то оно заменяет основное. Это работает, даже если файл меню пустой. В таком случае в разделе не будет отображаться никакое меню.

Статическое меню заменяет статическое, а динамическое (основанное на инфоблоке) может быть заменено только динамическим.

Есть еще вариант применять для каждого раздела свой шаблон дизайна или прописать эту смену в шаблоне сайта, но для контент-менеджера это нетривиальная задача, поэтому лучше оставить её php-программистам. Для разработчиков наиболее подробная информация о меню дается в курсе Разработчик Bitrix Framework.

Мы же будем справляться с большинством задач методами, которые доступны контент-менеджеру.

В следующих уроках мы изменим основное меню и создадим собственные меню разделов - статическое и динамическое.

Заключение

  • Меню может быть различного вида - статическое, динамическое или смешанное.
  • Статическое меню подключает файлы и папки физической структуры сайта, динамическое меню подключает разделы и элементы инфоблока.
  • Можно использовать разные типы меню и создавать собственные.
  • Меню может выводиться в публичной части разными компонентами.
  • Любое меню является иерархически наследуемым.

Документация по теме:


Текст раскрывает тему
Мы стараемся сделать документацию понятнее и доступнее,
и Ваше мнение важно для нас
Нам жаль это слышать… Но мы постараемся быть лучше! Поясните, пожалуйста, свой выбор:

Мы благодарны вам за помощь в улучшении документации.

Курсы разработаны в компании «1С-Битрикс»