Сегодня, мы затронем тему создания выпадающего меню на Битрикс. В принципе, тема создания меню достаточно проста, но тем не менее, требует наличия знаний по работе с данной CMS.
Обзор по разработке меню, мы начнем с создания нового раздела в верхнем меню на сайте. Для этого, перейдите в публичную часть сайта и в списке панели инструментов выбираете «Создать раздел». В открывшемся окошке «Мастер создания нового раздела» заполняете поле с названием будущего раздела и переходите далее.
За тем, указываете тип меню (где именно будет отображен пункт, в верхнем или нижнем меню), а также очередность в общем меню.
И последним шагом, будет указание ключевых и описание страницы. После чего, вы нажимаете «Готово» и проверяете наличие пункта меню на главной странице сайта.
Здесь, обязательно указываете:
После, нажимаете «Сохранить» или «Применить».
На сайте, созданные под-пункты меню будут отображены слева в родительской папке, в которой вы их создали.
Количество под-пунктов меню, будет зависеть от ваших пожеланий. Чтобы просмотреть результат, перейдите на главную страницу. При наведении на раздел Библиотеки, увидите выпадающее меню.
А также их отображение в левой части сайта, при выборе раздела.
В тот момент, когда на элемент меню верхнего уровня наводится курсор мыши (псевдокласс hover), вложенное меню становится видимым, cвойство display принимает значение block.
.hmenu li:hover ul < display: block ; >
Теперь о том, как рассмотренный механизм интегрировать в Bitrix. Обычно шаблон сайта содержит главное верхнее меню, расположенное в заголовке ( файл header.php). Разработчику предоставлена возможность добавлять, удалять и редактировать существующие пункты меню. Кроме этого, само меню имеет шаблон компоненты, который можно переназначать и редактировать. На нижнем рисунке в качестве шаблона выбран personal_tab (Широкий (Синий)).
Сам шаблон компонента располагается в папке шаблона сайта в каталоге components\bitrix\menu\personal_tab\
В каталоге находится один единственый файл template.php, в котором хранится код формирования нашего меню. Этот код и надо изменить. Вся информация для отображения меню хранится в массиве $arResult. Надо в цикле перебрать элементы массива и сформировать html код меню. Массив состоит из следующих колонок:
function showSubmenu(index, oVal) < ShowLayers(«sm» + index, oVal); >
function hideSubmenu(index, oVal) < var obj = tmt_findObj(«sm» + index); if (document.getElementById) < var XXX = 0; if (obj) < XXX = obj.offsetLeft; var oValTmp = obj.parentElement; while (oValTmp) < XXX = XXX + oValTmp.offsetLeft; oValTmp = oValTmp.offsetParent; > var x = window.event.x; var y = window.event.y; if( (x > XXX && x YYY && y ShowHideLayers(«sm» + index, «hide»); >
Добрый день, используйте шаблон многоуровневого выпадающего меню. Он входит в стандартную поставку продукта.
Этот вопрос неоднократно поднимался и описывался.
ВЫ не хотите для начала пройти учебные курсы? Там есть ответы на многие вопросы. Курсы бесплатные.
Кстати, выпадающее меню можно сделать без модификации кодов, а просто используя нужные шаблоны для компонента Меню с заданием соответствующих типов меню.
1) в параметрах компонента указываете уровень вложенности меню. 2) там же указываете тип меню для внутренних уровней 3) там же выбираете шаблон horizontal_multilevel
Цитата
Булат Вахитов пишет: 1) в параметрах компонента указываете уровень вложенности меню.
2) там же указываете тип меню для внутренних уровней
3) там же выбираете шаблон horizontal_multilevel
Цитата
Dmitriy Vlasov пишет: Добрый день, используйте шаблон многоуровневого выпадающего меню. Он входит в стандартную поставку продукта.
Этот вопрос неоднократно поднимался и описывался.
А в демоверсии малого бизнеса интернет-магазина, интересно, этот шаблон есть? Я не смог с помощью стандартных шаблонов демоверсии сделать выпадающее меню. По моему демоверсия бедна шаблонами, особенно для выпадающего меню.
Цитата
Вячеслав Чешихин пишет: А в демоверсии малого бизнеса интернет-магазина, интересно, этот шаблон есть? Я не смог с помощью стандартных шаблонов демоверсии сделать выпадающее меню. По моему демоверсия бедна шаблонами, особенно для выпадающего меню.
Да, действительно, есть всё в демоверсии. А вот технология создания выпадающего иерархического (в общем случае) меню:
1) В свойствах модуля «Главный модуль» добавляете ещё один тип меню «SUBMENU» к ранее существующим: верхнее,левое и нижнее меню.
2)Создаёте верхнее,левое или нижнее меню, которое будет иерархическим.
4)Переходите в режим правки компонентов(в правом верхнем углу нажимаете на переключатель)
Всё должно работать.
Цитата
Вячеслав Чешихин пишет: Да, действительно, есть всё в демоверсии. А вот технология создания выпадающего иерархического (в общем случае) меню:
1) В свойствах модуля «Главный модуль» добавляете ещё один тип меню «SUBMENU» к ранее существующим: верхнее,левое и нижнее меню.
2)Создаёте верхнее,левое или нижнее меню, которое будет иерархическим.
4)Переходите в режим правки компонентов(в правом верхнем углу нажимаете на переключатель)
Цитатник веб-разработчиков В тексте курса вы встретите цитаты, высказанные в разное время разработчиками системы и разработчиками проектов на базе Bitrix Framework. Надеемся, что такие неформальные замечания внесут некоторое разнообразие в процесс изучения. Заодно опытные специалисты поделятся и своим опытом.
Чтобы научиться программировать в Bitrix Framework, нет необходимости изучать всю линейку курсов. Но есть моменты, которые необходимо знать разработчикам о системе, они раскрыты в начальных курсах:
Как построен курс
Общепринятая градация квалификации разработчиков в рамках курса обозначает что:
Начальные требования к подготовке
Для успешного изучения курса и овладения мастерством разработки сайтов на Bitrix Framework необходимо владеть (хотя бы на начальном уровне):
У нас часто спрашивают, сколько нужно заплатить
Ещё у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.
Баллы опыта
уроке.
Тесты
После изучения курса вам будет предложено пройти тесты на сертификацию. При успешной сдаче последовательности тестов на странице Моё обучение можно просмотреть результат обучения и загрузить сертификат в формате PDF.
Комментарии к статьям
Что дальше?
Одновременно с изучением курса Разработчик Bitrix Framework вам придётся обращаться к информации о других технологиях Bitrix Framework. Эта информация размещена в следующих курсах:
Для преподавания оффлайн
Если данный курс берётся в качестве основы для оффлайного преподавания, то рекомендуемая продолжительность: 5 дней (40 академических часов).
Если нет интернета
Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на Android: EPUB Reader CoolReader FBReader Moon+ Reader eBoox
iPhone: FBReader CoolReader iBook Bookmate
Windows: Calibre FBReader Icecream Ebook Reader Плагины для браузеров: EpuBReader – для Firefox Readium – для Google Chrome
iOS Marvin for iOS ShortBook обновляются периодически, поэтому возможно некоторое отставание их от онлайновой версии курса.
уроке.
Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на