Функционал
Организация Главного меню сайта
При создании навигационного меню (как правило, Главного меню сайта) зачастую возникает вопрос, как можно задать вёрстку под конкретный дизайн для различных уровней меню.
Навигационный модуль циклически генерирует списки страниц каждого раздела с учётом вложенности, и в "Формате вывода" модуля возможно задать верстку (в т.ч. необходимыми классами и пр.) для шаблона только цикла. Иными словами, все те классы, что будут заданы для тегов, будут повторяться как для первого уровня, так и для последующих вложенных.
Поэтому у разработчика могут возникать определённые сложности с повторением нужных навигационных структур под конкретные фреймворки, так как создать для первого уровня ul с классами, к примеру, "navbar navbar-nav navbar-right", а ul для второго уровня с совсем другим классом "dropdown-menu" не получится.
В модуле Вы задаёте типовую вёрстку только для цикла, где каждый цикл - это, грубо говоря, ul со своим содержимым. Поэтому вёрстка всех уровней меню будет одинаковой!
Однако создавать меню с разным оформлением и поведением всё-таки можно и система даёт для этого комбинацию "зацепок" (правда, придётся отказаться от фреймворка и вручную создать необходимые CSS-правила и написать нужные скрипты).
Обратите внимание на стандартный формат вывода модуля (см. любой шаблонный сайт, например, шаблон 2). На месте вставок [[CLASS]] система как раз добавит классы, которые будут в этом полезны. Например, меню разных уровней вложенности различаются между собой классами "level_x", где x - уровень вложенности. Но не только.
Вот какие классы добавляет система (рассмотрим вёрстку с ul и li по умолчанию):
для <ul>:
- "level_x" - уровень подменю согласно вложенности;
-
"parent_active" - если в текущем списке (даже если среди вложенных списков) котором есть активная страница (на которой сейчас находится пользователь) - это своего рода маркер активной и развёрнутой ветки сайта;
для <li>:
- "parent" - если в текущем пункте есть подменю (в вёрстке по умолчанию это тег <ul>);
- "active" - если это активный пункт меню (на которой сейчас находится пользователь)
- "parent_active" - если текущий пункт имеет подменю с активной страницей
(в живую результат вёрстки можно посмотреть, например, тут: http://шаблон2.веб-мастерская.бел/сервисы/карта-сайта)
Таким образом, задача по организации меню нужным образом сводится к оформлению разных подменю вёрстки через CSS с использованием:
* вложенных селекторов (например, все выпадающие подменю):
.level_0 ul {...}
* дочерних селекторов (например, оформление только подменю второго уровня при наведении мышкой на пункт меню 1го уровня):
.level_1 > li:hover > ul {...}
либо
.parent:hover > .level_2 {...}
* мультиклассов (например, только для подменю пункта активной страницы):
.parent.active > ul {...}
и т.п.
P.S. Аналогичным образом обращение к разным элементам возможно через JS.