Оригинальные решения для CMS Битрикс подробно

Вертикальное многоуровневое выпадающее меню на CSS для 1С-Битрикс

В данном примере реализовано вертикальное многоуровневое выпадающее меню на CSS для 1С-Битрикс “Управление сайтом” без использования какого-либо JavaScript. Данное меню имеет один уровень вложенности, но при необходимости этот уровень можно увеличить.

Технология и алгоритм работы этого меню, в отличии от примера с “Горизонтальным выпадающем меню на CSS” полностью совпадает с разработкой данного модуля компанией 1С-Битрикс. Единственное, что пришлось сделать – это полностью переписать сам компонент 1C-Битрикс “vertical_multilevel”, его CSS файл и избавиться от JavaScript. Все остальное осталось “на уровне” системы 1С “Управление сайтом” и файл “Тип меню для первого уровня” – .top_***.menu.php, который размещается в “корневой” папке данного меню и файл “Тип меню для остальных уровней” – .left_***.menu.php, который находится в папках подразделов меню.

Дополнительные (выпадающие) пункты меню вносятся на стадии редактирования меню пунктов в “Административном разделе” поэтому конечный пользователь, знакомый с CMS 1С-Битрикс, не будет испытывать никаких сложностей, а использование файлов CSS (каскадных таблиц стилей) вместо JavaScript дает значительные преимущества для поисковой оптимизации и незаменимо для тех пользователей, у которых JavaScript запрещен в браузере.

После дополнительной доработки, в данном меню возможно применение “кнопок” с разным фоновом рисунком (пример такого меню здесь), а также создание горизонтального многоуровневого выпадающего меню на CSS, работающего на основе алгоритма многоуровневого меню 1С-Битрикс. Причем для создания горизонтального многоуровневого выпадающего меню даже нет необходимости изменять логику работы php скрипта меню, а достаточно лишь изменить CSS файл. Внешнее оформление горизонтального выпадающего меню на CSS целиком построено на основе “левого” меню этого сайта.

К сожалению, из-за особенностей структуры html-макета данного сайта (концепция html-макета сайта описана в разделе “Создаем основной шаблон”), нет никакой возможности использовать этот вид меню в качестве основного, поэтому в разделе “Создаем сайт на Битрикс” в качестве вертикального многоуровневого выпадающего меню на CSS используется “скользящее меню”, которое также не использует в свой работе никакого JavaScript.

Работа вертикального многоуровневого выпадающего меню на CSS проверена в IE6, IE7, Opera 9.64 и Mozilla Firefox/3.0.8.

Посмотреть работу меню и “пощелкать” по ссылкам можно здесь.