Пример создания разворачивающегося меню

Еще один пример создания меню средствами шаблонизатора PHPC. Допустим, мы хотим, чтобы второй уровень меню выводился только для "активной" группы − щелкнули по ссылке и попали на другую страницу, на которой отображены все вложенные элементы этой группы. Щелкнули по другой группе − развернулась другая группа. Этот пример чуть сложнее, поэтому нам придется использовать PHP-вставки в шаблонах.

Шаг 1. Добавляем будущее меню в дизайн сайта

Откройте содержимое шаблона htmlDesign и в подходящем месте добавьте фрагмент:

<insert:menu/>

Этот тег вставляет в дизайн сайта другой шаблон (menu). Если попытаться зайти на сайт прямо сейчас, компилятор выдаст сообщение об ошибке, так как такого шаблона у нас еще нет.

Шаг 2. Создаем меню

Создайте новый шаблон с именем menu и следующим содержимым:

<insert:htmlMenu>

<insert:htmlMenuGroup link="/" title="Сайт">
  <insert:htmlMenuItem link="/about" title="О сайте"/>
  <insert:htmlMenuItem link="/contacts" title="Обратная связь"/>
  <insert:htmlMenuItem link="/map" title="Карта сайта"/>
  <insert:htmlMenuItem link="/links" title="Партнеры"/>
</insert:htmlMenuGroup>

<insert:htmlMenuGroup link="/documents" title="Документы">
  <insert:htmlMenuItem link="/documents/first" title="Первый документ"/>
  <insert:htmlMenuItem link="/documents/second" title="Второй документ"/>
  <insert:htmlMenuItem link="/documents/third" title="Третий документ"/>
</insert:htmlMenuGroup>

<insert:htmlMenuGroup link="/reports" title="Отчеты">
  <insert:htmlMenuItem link="/reports/first" title="Первый отчет"/>
  <insert:htmlMenuItem link="/reports/second" title="Второй отчет"/>
  <insert:htmlMenuItem link="/reports/third" title="Третий отчет"/>
</insert:htmlMenuGroup>

</insert:htmlMenu>

Данный шаблон будет хранить структуру меню, без оформления. Все оформление будет храниться в отдельных вспомогательных шаблонах − htmlMenu, htmlMenuGroup и htmlMenuItem. Осталось только создать их.

Шаг 3. Создаем вспомогательные шаблоны

Создайте друг за другом еще три шаблона.

Шаблон htmlMenu:

<var:content>

Шаблон htmlMenuGroup:

<?-- Определение того, развернута ли группа меню --?>
<?php $settings["menuExpand"]=$_SERVER["REQUEST_URI"]==$link; ?>

<?-- Вывод содержимого группы, но не на экран, а в переменную menuContent --?>
<logic:capture property="menuContent">
<ul>
<var:content>
</ul>
</logic:capture>

<?-- Вывод заголовка группы --?>
<a href="<var:link>"><b><var:title></b></a><br>

<?-- Если группа развернута − выводим ее содержимое --?>
<logic:notEmpty property=settings:menuExpand then=menuContent/>

Шаблон htmlMenuItem:

<?-- Определение того, развернута ли группа меню --?>
<?php if($_SERVER["REQUEST_URI"]==$link) $settings["menuExpand"]=true; ?>

<?-- Вывод элемента меню --?>
<li><a href="<var:link>"><var:title></a></li>

Как и в предыдущем примере, первый шаблон хранит оформление меню в целом, второй − оформление группы меню (единственное отличие в том, что теперь у группы меню, кроме названия, есть также и ссылка), третий − оформление элемента меню. Во втором и третьем шаблонах присутствуют PHP-вставки: это проверки на то, нужно ли отображать элементы группы. Их лучше оставить как есть.

Шаг 4. Смотрим, что получилось

Если теперь зайти на сайт, должно отобразиться что-то вроде этого:

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