Простое верхнее меню + левое подменю + 1 колонка

С помощью Менеджера меню вы можете легко разделить навигацию на две части. На этой странице верхний уровень иерархии страниц отображается горизонтально, и в зависимости от того, какая страница отображается, в левом подменю выводятся подуровни (дочерние страницы) для раздела Шаблоны.

Тег {Navigator}

Тег {Navigator} дважды добавлен в этом шаблоне. Первый для верхнего меню, которое показывает только первый уровень иерархии страниц. Он выглядит так: {Navigator template='Simple Navigation' number_of_levels='1'}.

Левое подменю должно содержать только страницы второго уровня или дочерние страницы для текущего раздела верхнего меню. Соответственно страницы третьего уровня должны выводиться слева только если кликнуть по родительскому элементу второго уровня, иначе они должны быть скрыты. То есть третий уровень сворачивается, если страница не выбрана.

Тег для подменю выглядит следующим образом: {Navigator template='simple_navigation.tpl' start_level='2' collapse='1'}.

Прикрепленные таблицы стилей для меню

Поскольку основная навигация и суб-навигация должны иметь разные стили (одна горизонтальная, другая вертикальная), к этому шаблону страницы прилагаются две таблицы стилей навигации. Navigation Simple - Horizontal - для горизонтального верхнего меню. Navigation Simple - Vertical - стили для вертикального левого меню.

Оба меню используют один и тот же шаблон Навигатора

Однако, как вы могли видеть, обе части навигации используют один и тот же шаблон диспетчера меню. Это потому, что выходной код такой же. Только через CSS эти две части стилизованы по-разному.

Перемещение боковой панели вправо

Вы можете легко переместить боковую панель с суб-навигацией вправо. Взгляните на таблицу стилей Layout Top menu + 2 columns на свойство float:left; в элементе div#sidebar. Замените его на float:right; и боковое подменю поменяте своё положение. Конечно вам нужно будет настроить отступы для sitebar и div#main. Обычно достаточно поменять местами правые и левые отступы (margins).


Предыдущая страница: Простое меню слева + 1 колонка
Следующая страница: CSSMenu верхнее меню + 2 колонки