как сделать выпадающее меню битрикс
Создание выпадающего меню в Bitrix
Сегодня, мы затронем тему создания выпадающего меню на Битрикс. В принципе, тема создания меню достаточно проста, но тем не менее, требует наличия знаний по работе с данной CMS.
Обзор по разработке меню, мы начнем с создания нового раздела в верхнем меню на сайте. Для этого, перейдите в публичную часть сайта и в списке панели инструментов выбираете «Создать раздел». В открывшемся окошке «Мастер создания нового раздела» заполняете поле с названием будущего раздела и переходите далее.
За тем, указываете тип меню (где именно будет отображен пункт, в верхнем или нижнем меню), а также очередность в общем меню.
И последним шагом, будет указание ключевых и описание страницы. После чего, вы нажимаете «Готово» и проверяете наличие пункта меню на главной странице сайта.
Здесь, обязательно указываете:
После, нажимаете «Сохранить» или «Применить».
На сайте, созданные под-пункты меню будут отображены слева в родительской папке, в которой вы их создали.
Количество под-пунктов меню, будет зависеть от ваших пожеланий. Чтобы просмотреть результат, перейдите на главную страницу. При наведении на раздел Библиотеки, увидите выпадающее меню.
А также их отображение в левой части сайта, при выборе раздела.
Тренинги и программирование
Горизонтальное выпадающее меню на Bitrix
Так выглядит меню с использованием таблицы стилей. Ниже приводится содержание файла hmenu.css.
. /*sub-menu box*/
.hmenu li ul
<
margin: 0px ;
padding: 0px ;
list-style: none ;
display: none ;
z-index: 500 ;
position: absolute ;
>
В тот момент, когда на элемент меню верхнего уровня наводится курсор мыши (псевдокласс hover), вложенное меню становится видимым, cвойство display принимает значение block.
.hmenu li:hover ul
<
display: block ;
>
Теперь о том, как рассмотренный механизм интегрировать в Bitrix. Обычно шаблон сайта содержит главное верхнее меню, расположенное в заголовке ( файл header.php). Разработчику предоставлена возможность добавлять, удалять и редактировать существующие пункты меню. Кроме этого, само меню имеет шаблон компоненты, который можно переназначать и редактировать. На нижнем рисунке в качестве шаблона выбран personal_tab (Широкий (Синий)).
Сам шаблон компонента располагается в папке шаблона сайта в каталоге components\bitrix\menu\personal_tab\
В каталоге находится один единственый файл template.php, в котором хранится код формирования нашего меню. Этот код и надо изменить. Вся информация для отображения меню хранится в массиве $arResult. Надо в цикле перебрать элементы массива и сформировать html код меню. Массив состоит из следующих колонок:
Частые вопросы
Работа с меню
Наверх
| Как правильно задать поле «Условие» для пункта меню? | |
| Функция, отвечающая за вывод меню проверяет, какое значение принимает условие, т.е. оно должно быть введено в php-форме. К примеру, для того, чтобы разрешить показ какого-то пункта только авторизованным пользователям, в этом поле введите: Для проверки, установлен ли параметр xxx:
Наверх |
уроке.
Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на