битрикс многоуровневое выпадающее меню
Битрикс многоуровневое выпадающее меню
Компонент выводит меню указанного типа. Компонент является стандартным и входит в дистрибутив модуля.
Описание menu
В визуальном редакторе компонент расположен по пути: Служебные > Навигация > Меню.
Компонент относится к Главному модулю.
В поставку продукта входят следующие шаблоны компонента Меню (bitrix:menu):
Параметры
Пример вызова
Смотрите также
Пользовательские комментарии
Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.
Для этого нужно всего лишь авторизоваться на сайте
Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.
Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
Привет! И так, продолжаем разруливать тему «Битрикс». И сегодня посмотрим как на самом деле происходит создание меню на Битрикс. Как это ни странно, но без небольшого багажа знаний и ухищрений этот процесс может вызвать затруднения у многих обывателей, решивших что Битрикс им по зубам:)
Что именно будем делать в этом уроке?
Создадим на сайте 3 типа меню:
Сделаю небольшой экскурс. Так как практически вся работа битрикса (обработка данных и их вывод) основана на различных компонентах, то стоит пояснить с чем мы имеем дело в данном уроке.
Компонент Menu ( bitrix:menu).
Компонент выводит меню указанного типа. Компонент является стандартным и входит в дистрибутив модуля. В визуальном редакторе компонент расположен по пути: Служебные > Навигация > Меню. В поставку продукта входят следующие шаблоны компонента Меню (bitrix:menu):
Пример вызова
Немного о параметрах, которые вы видите в примере вызова компонента.
DELAY [Y|N] — Откладывает выполнение шаблона меню. При отмеченной опции выполнение шаблона будет происходить после загрузки страницы. Очень удобен при включенном кэшировании компонента, если нужно все же выполнять какие-то действия по модификации внешнего вида пунктов меню в зависимости от текущей страницы. Например, добавление пунктов меню в компонентах.
Стандартный набор параметров впечатляет, правда?)
Перейдем непосредственно к коду!
Если к примеру нужно создать вложенные пункты в пункте About в верхнем меню, можно воспользоваться архитектурой 1С-Битрикс и создать разделы /about/ и /about/profile/, а так же по меню типа «top» в каждом из них (пока не будем создавать страниц, только файловую структуру разделов и меню).
Далее надобно разместить сам компонент меню bitrix:menu на тестовой странице или же где-нибудь в шаблоне, к примеру в footer.php или header.php, в дальнейшем будем работать с ним.
Нижнее меню (bottom)
Этот код вам уже знаком с примера вызова компонента, который мы рассматривали выше. Так как в Битриксе шаблоны компонентов изначально лежат в папках с компонентами, лучше скопировать оригинальный дефолтный шаблон в папку с конкретным общим шаблоном нашего сайта, это надо делать как минимум для того чтобы не портить шаблон ядра компонента и чтобы все наши наработки не слетели при первом же обновлении системы. Поэтому скопируем шаблон компонента под именем «bottom» в шаблон сайта. Хоть это очень лаконичный шаблон, в целях обучения мы не возьмём от него практически ничего:
В этом коде вы можете познакомится со своим другом, который будет вас преследовать на всех этапах разработки на Битрикс, это суперглобальный массив $arResult. В нем хранится все, что может вам понадобится в процессе создания сайта, а то что вы там не найдете можно в любой момент подключить или выбрать с базы благодаря чудо-файлу result_modifier.php, который находится в папке шаблона каждого компонента.Если в изначальной сборке вы его не обнаружили ничего страшного, его всегда можно создать и использовать на свое усмотрение.
Создается этот файл еще и для того, чтобы отделить логику от верстки, то есть обработав всю логику в файле result_modifier.php все полученные данные будут доступны для вывода в шаблоне компонента (файл template.php).
Поставим этот код сразу после начала цикла и сохраним шаблон. Основное, на что нам надо обратить внимание, это параметры:
Параметр [SELECTED] не пуст тогда, когда пункт меню соответствует нашему местонахождению в структуре сайта, то есть когда пункт выбран. Значит, мы легко можем использовать его для вывода нужного нам стиля, к примеру:
Параметр [ITEM_INDEX] отражает номер пункта меню в массиве. Вся хитрость в том, что мы можем использовать его для простановки разделителей между главными пунктами меню. Слегка подкорректируем вёрстку и выведем разделитель следующим кодом:
В итоге, на данном этапе, соединив все в кучу, шаблон компонента меню будет выглядеть так:
Также мы смело можем удалить лишние файлы, который нам достались при копировании оригинального шаблона .default.
Теперь размещаем вызов компонента нижнего меню вместо статики в шаблоне, которую я указывал ранее. Не забываем указывать тип и время кэширования, если конечно оно вам надо:)
Вуаля!) Простое нижнее меню готово, причем мы успели сделать разделители между пунктами, а также сделали возможность выделять активный пункт, заняло это всего две строчки кода, поэтому все очень быстро и удобно, главное понять логику работы компонента.
Битрикс многоуровневое выпадающее меню
Цитатник веб-разработчиков В тексте курса вы встретите цитаты, высказанные в разное время разработчиками системы и разработчиками проектов на базе 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
обновляются периодически, поэтому возможно некоторое отставание их от онлайновой версии курса.
1С-Битрикс: Многоуровневое древовидное меню по подразделам
Инструкция о том, как сделать в 1С-Битрикс полноценное многоуровневое древовидное меню, которое будет собираться из подразделов с использованием стандартного компонента меню (bitrix:menu).
Описание проблемы типового решения: Но если вы захотите (как часто делают) при переходе в раздел отображать его подпункты отдельным блоком, то тут возникает проблема, что отображаются только элементы текущего уровня, а не всего подраздела. Т. е. структура вложенности раздела, отображается только на верхнем уровне, а при переходе вглубь раздела остаются только пункты меню соответствующего уровня.
Вот как это выглядит на практике. Меню в разделе:
Если зайти в подраздел лицензии, то все верхние пункты меню пропадают:
Решение: Для решения данной проблемы придется немного схитрить и использовать три меню. Одно верхнего уровня (top) – большие разделы, второе меню (left), которое у нас уже было для подразделов и третье меню (left2) только для подстановки всего дерева для отображения. При этом в меню left2 мы не будем добавлять вручную никаких пунктов.
Верхний уровень меню делаем обычным способом без всяких хитростей, можно использовать стандартный древовидный шаблон выпадающего меню.
При этом все пункты меню мы добавляем только в top (в корне сайта) и left (на всех остальных уровнях сайта).
В итоге получаем то, что и требовалось:
Ну и если вы работаете над своим сайтом и ничего не зарабатываете на нем, то это странно. Попробуйте гарантированный способ заработка на сайте – продажу рекламных ссылок через биржу. Это честный пассивный доход, который позволит вам меньше зависеть от зарплаты.
1С-Битрикс. Пишем человеческий шаблон многоуровнего меню каталога
Не буду писать про боль при интегации дефотного шаблона. Давайте просто напишем свой, с блекджеком и вот этим всем.
В заметке (интересного):
Вводные данные
Предположим, что шаблон вашего сайта называется main. Все пути в заметке будут на основе его.
Шаблон меню обзовём template-with-ul-recursive.
Тип меню будет catalog-left-menu
Вызываем компонент bitrix:menu
Остальные параметры индивидуальны.
CSS-класс для каждого пункта меню
Для секции добавим (пригодится) новое пользовательское свойство с именем UF_CSS_CLASS_MENU и типом строка. Свойство можно добавить на странице редактирования любого раздела нужного инфоблока (вкладка «Доп. поля»)
Наполняем пунктами меню
Важно! Урлы секций обрабатываются только для варианта #SECTION_CODE_PATH#
Создаём папку и файлы шаблона
Создадим папку для нашего шаблона local/templates/main/components/bitrix/menu/template-with-ul-recursive
Создаём в этой папке файл result_modifier.php. В нём мы соберём массив нужного нам формата, чтобы потом в шаблоне было удобно выводить само меню.
Создаём в папке local/templates/main/components/bitrix/menu/template-with-ul-recursive/ файл template.php с нашим шаблоном
Вот, собственно, и всё. Надеюсь, вам понравилось Подписывайтесь на канал, ставьте пальцы вверх и т.п. 🙂
Похожие записи
1С-Битрикс. LazyLoad или ленивая загрузка контента при включенном кешировании
В этой заметке я хочу рассказать о технологии LazyLoad или в простонародье «ленивая загрузка» в Битриксе. Метод, описанный мной, будет точно работать в компонентах catalog.section и news.list.
1C-Битрикс. Кастомизация нового шаблона компонента sale.order.ajax
С выходом нового шаблона компонента sale.order.ajax на форумах битрикса разгораются возмущения и недомения. Мол, теперь код всего шаблона на JavaScript и как его кастомизировать непонятно. На самом деле да, код js-скрипта составляет почти семь тысяч строк. Сходу в таком количестве кода, даже хорошо написанного (к сожалению, битрикс этим не балует), соблюдая паттерны программирования, будет непросто.
В этой заметке я покажу способ, как можно кастомизировать основной скрипт логики шаблона оформления заказа (order_ajax.js), не прибегая к его правке. Что нам это даёт? Когда прилетят очередные обновления шаблона, мы просто заменим его и всё. Все наши кастомизации будут работать (в теории).
1С-Битрикс. Защита от спама в регистрации без капчи
Не редкость, когда боты начинают регистрироваться на сайтах и захламлять списки пользователей своим присутствием. В «1С-Битрикс» можно включить капчу для защиты от спама. Но порой и капча не спасает, да и заставлять пользователей вводить код с капчи, я считаю, не гуманно. Воспользуемся другим трюком.
6 комментариев
Не буду писать про боль при интегации дефотного шаблона bitrix:menu
там вся боль успешно убирается через result_modifier.php https://dev.1c-bitrix.ru/community/webdev/user/25535/blog/hierarchical-menus-and-resultmodifier/
поработаем с сущностями инфоблока через ORM D7
я в этом нагрмождении кода вижу только очередное доказательство ненужности D7 для инфоблоков
Сергей, спасибо!
Это что за сумашествие? А switch хотя б не судьба использовать?
Чем здесь поможет свич?
Посмотри ещё раз на свой скриншот и покажи свой вариант, чтобы работал точно так же, как у меня.
I agree. whole tape of logic that is hard to read. why it is impossible to take out processing to the class and speaking methods