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

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

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

Логика и технология работы этого меню в корне отличается от технологии, предложенной разработчиками 1С-Битрикс.    Отличия состоят не только в том, что в данном меню СОВСЕМ не используется JavaScript, но и структурой файла “.*_menu.menu.php”. Основой работы данного меню являются “дополнительные параметры” стандартного компонента Битрикс “меню” (количество которых увеличено до 2-х) и каскадные таблицы стилей CSS. Алгоритм работы php скрипта для многоуровневого выпадающего меню на CSS построен на основе “стандартного” компонента 1С-Битрикс “меню”.

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

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

Внешнее оформление выпадающего меню на CSS целиком построено на основе “верхнего” меню этого сайта. “Выпадающими” пунктами меню являются “Услуги” и “Примеры”, а рабочими ссылками в выпадающих списках – “Услуги 03”, “Услуги 04”, “Примеры 02” и “Примеры 04”.    “Текущая ссылка” в “основном” и “выпадающем” меню выделена подчеркиванием. При наведении курсора на “текущую ссылку” в “основном” меню, она “подсвечивается” желтым цветом шрифта и подчеркиванием, а в “выпадающем” меню – подчеркиванием и красным цветом шрифта.

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

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