Как сделать всплывающее меню в битрикс

Меню в Битриксе: типы, создание и редактирование пунктов меню

Из чего состоит меню Битрикс, на какие типы делится и как формируется? На эти вопросы не так просто ответить не только новичку, но и опытному специалисту. При формировании и внедрении меню, а также редактировании его пунктов нужно быть особенно внимательным.

Что такое меню в 1С-Битрикс и почему его называют наследуемым?

Любое меню на сайте формируется на базе двух элементов:

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

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

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

Типы меню

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

Типы меню

В общем случае на сайте есть одно «главное» меню, которое соответствует верхней ступени иерархии. Отображается оно во всех разделах сайта. Также в системе используется меню второго уровня. Оно включает ссылки на подразделы и документы настоящего раздела.

Отображение меню

Меню многоуровневое и наследуемое. Так, если для одного компонента Меню в шаблоне имеется конкретный тип меню, то оно же будет транслироваться ниже на все страницы и разделы сайта вместе с шаблоном. При этом должно соблюдаться условие, что в этих разделах и страницах не было сформированного собственного меню. Такой механизм удобен для основного меню сайта. Обычно ему присваивается тип «Верхнее».

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

Каждому разделу присваивается свое меню. Транслируется оно на все страницы раздела. При необходимости в подразделах вы можете создавать собственное меню и применять к нему свой тип.

Виды используемых на веб-ресурсе меню задаются из административного раздела на странице настроек модуля Управление структурой. Допустим, в системе применяются два типа меню:

Настройка типов меню

Статическое меню

В 1С-Bitrix все данные делятся на два типа: статические и динамические. Статическая информация редко меняется с течением времени. Создается и редактируется вручную. Статические данные вводятся непосредственно на странице сайта, а потому меняются редко и вручную.

Динамическая информация хранится в базе данных сайта и выводится специальными компонентами системы. Размещается она с помощью программного кода и редактируется автоматически в зависимости от изменений в источнике данных – информационном блоке. Помимо этого, представленные два типа информации отличаются вариантами хранения, обработки и вывода. Оба вида информации могут быть размещены на одной физической странице. Допускается создание смешанного меню, которое будет содержать как статические, так и динамические пункты.

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

Статическое меню

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

Динамическое меню

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

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

Динамическое меню

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

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

Независимо от того, какой тип меню — статический или динамический, — вы выбрали, корректная его работа во многом зависит от скорости сайта. Чтобы не потерять посетителей и конверсии, убедитесь, что сайт работает достаточно быстро. О том, как это сделать, мы писали в статье «Оптимизация сайта на “Битрикс”».

Формирование меню и внедрение его в шаблон сайта

Отметим еще раз: статические данные в структуре сайта – это папки (они же разделы) и файлы (страницы). Динамическая же информация – это инфоблоки (инструменты, с помощью которых в Базу данных заносится информация).

Следовательно, статическое меню:

Что нужно для создания статического меню с последующим внедрением его в шаблон сайта? Алгоритм работы следующий:

По итогу мы получим статическое меню в разделе «Саженцы».

Создать меню динамического типа можно несколькими способами. Первый вариант самый легкий: нужно добавить к каталогу демо-версии сайта собственные разделы и подразделы. Они автоматически попадут в главное меню.

Второй вариант – настройка меню на свой инфоблок. Алгоритм следующий:

Наконец, третий способ. Он предполагает внесение изменений в код. Для этого:

После этого динамическое меню автоматически отобразится в разделе.

Построение меню для показа проходит в три этапа:

Источник

Выпадающее меню..

Добрый день, используйте шаблон многоуровневого выпадающего меню. Он входит в стандартную поставку продукта.

Этот вопрос неоднократно поднимался и описывался.

ВЫ не хотите для начала пройти учебные курсы? Там есть ответы на многие вопросы. Курсы бесплатные.

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

1) в параметрах компонента указываете уровень вложенности меню.
2) там же указываете тип меню для внутренних уровней
3) там же выбираете шаблон horizontal_multilevel

Цитата
Булат Вахитов пишет: 1) в параметрах компонента указываете уровень вложенности меню.

2) там же указываете тип меню для внутренних уровней

3) там же выбираете шаблон horizontal_multilevel

Цитата
Dmitriy Vlasov пишет: Добрый день, используйте шаблон многоуровневого выпадающего меню. Он входит в стандартную поставку продукта.

Этот вопрос неоднократно поднимался и описывался.

А в демоверсии малого бизнеса интернет-магазина, интересно, этот шаблон есть? Я не смог с помощью стандартных шаблонов демоверсии сделать выпадающее меню. По моему демоверсия бедна шаблонами, особенно для выпадающего меню.

Цитата
Вячеслав Чешихин пишет: А в демоверсии малого бизнеса интернет-магазина, интересно, этот шаблон есть? Я не смог с помощью стандартных шаблонов демоверсии сделать выпадающее меню. По моему демоверсия бедна шаблонами, особенно для выпадающего меню.

Да, действительно, есть всё в демоверсии. А вот технология создания выпадающего иерархического (в общем случае) меню:

1) В свойствах модуля «Главный модуль» добавляете ещё один тип меню «SUBMENU» к ранее существующим: верхнее,левое и нижнее меню.

2)Создаёте верхнее,левое или нижнее меню, которое будет иерархическим.

4)Переходите в режим правки компонентов(в правом верхнем углу нажимаете на переключатель)

Всё должно работать.

Цитата
Вячеслав Чешихин пишет: Да, действительно, есть всё в демоверсии. А вот технология создания выпадающего иерархического (в общем случае) меню:

1) В свойствах модуля «Главный модуль» добавляете ещё один тип меню «SUBMENU» к ранее существующим: верхнее,левое и нижнее меню.

2)Создаёте верхнее,левое или нижнее меню, которое будет иерархическим.

4)Переходите в режим правки компонентов(в правом верхнем углу нажимаете на переключатель)

Источник

Редактирование МЕНЮ в 1С Битрикс

Дополнительное видео

В данной статье подробно разберем:

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

При работе с меню в 1С Битрикс появляются вопросы почему какие-то пункты не отображаются, какие-то не подлежат изменению?

В документации 1C битрикса не каждый разберется, так как для ее осознания нужно не просто прочитать, а обязательно отработать прочитанный материал. Не у каждого есть возможность это сделать, да и времени уйдет довольно много, что бы осознать и понять, как это все работает, и это ради пару добавлений разделов которые возможно в дальнейшем и трогать не придется.

Я перед собой поставил задачу, как можно подробней рассказать и показать на примерах, как это все устроено. Дочитав статью до конца, Вы научитесь, редактирования меню в системе Битрикс, поймете, что в этом нечего сложного нет, а вот, получится у меня это сделать или нет, я узнаю по вашим комментариям.

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

Обо всем этом читайте далее…

Что такое меню в 1С Битрикс?

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

Также меню разделяется на основное и второстепенное. Основное меню соответствует самому верхнему уровню, второстепенное меню содержит ссылки на подразделы и документы текущего раздела.

Основной момент, который вы должны уловить, что меню в системе наследуется. То есть, если выбираем в компоненте определенный тип меню, то это меню будет отображаться, ниже на все разделы и страницы сайта, до момента пока в нем не создадим собственное меню.

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

Что такое тип меню?

Для примера создадим свой тип меню, которого в системе сейчас нет, присвоим ему тип « right » и назовем «Правое меню», сохранимся. После этих сохраннений у нас будет возможность выбирать в компоненте «Правое меню», а также выбирать этот тип в момент формирования раздела.

Вернемся на главную страницу и создадим в ней раздел с названием «DWS Меню», установим его отображение в верхнем меню сайта.

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

На страничке пропишу тестовый текст (Основы управления меню в системе 1С Битрикс) и сохраняю форму.

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

Разбор отображения меню

Теперь давайте подробно разберемся, каким образом меню отображается.

Любое меню в 1С Битрикс строится на основе двух составляющих:

И давайте далее разберем более подробнее каждый из пунктов.

Статическое Меню / Массивом данных «$aMenuLinks»

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

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

Для примера мы и создали тестовый раздел, на котором продемонстрирую данные операции.

Перейдя в новый раздел DWS меню, мы видим полное отображение верхнего меню, в принципе, как и в других разделах.

Допустим, мы хотим заменить несколько пунктов меню, а возможно и некоторые из текущего списка исключить.

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

Для примера давайте заполним форму тестовыми данными и сохранимся.

Появились пункты, которые мы формировали, переходя по другим разделам, эти пункты не отображаются.

Удалив вновь созданное меню, оно приобретает прежний вид.

Далее открываем меню на редактирование, я воспользуюсь кнопкой меню на панели администратора, выбираю «тип меню» которое буду редактировать, открывается форма со списками разделов. Где в первую очередь укажем ссылки именно с этой директории.

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

Отредактируем его при помощи режима правки, наводим на меню, жмем «Редактировать пункты меню», изменяем ссылки, для примера удаляем пару пунктов, сохраняемся.

Я думаю с этим проблем быть не должно, тут все предельно понятно.

Динамическое меню / Файл с приставкой _ext.php

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

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

Вывод меню на странице сайта

Отображения меню на страницах сайта выполняется с помощью компонента Меню (bitrix:menu).

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

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

Создание меню и внедрение его в шаблон сайта

Что бы вставить меню, нам нужен код компонента, который его вызывает. Для этого откроем страницу на редактирование, затем, выберу из служебных компонентов «navigation», «Меню», перетаскиваю его в форму, в настройках оставляю все по умолчанию, жмем сохранить.

Открываю форму в режиме кода, вырезаю данный компонент, и закрываю окно.

«Основы управления меню в системе 1С Битрикс.»

Далее следующим этапом вставим наш код в правый сайт бар.

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

Переходим в визуальную часть, у нас появилась такая иконка, символизирующая, что есть компонент. По заданию меню нужно отобразить только в нашем разделе, для этого переходим в «DWS меню», и тут можно создать его несколькими способами:

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

Источник