1. Документация
  2. Для разработчика сайта
  3. Файлы шаблона
  4. Различные статьи, касающиеся разработки шаблонов
  5. Советы по компоновке сайтов
  6. Навигация
  7. Примеры меню

Вертикальное меню с присоединенным подсписком

Вертикальное меню с присоединенным подсписком (nested)

Данное меню напоминает вертикальное меню с вложенными (nested) подсписками, рассмотренное в предыдущей статье.

Отличие заключается в том, что теперь извлекается подсписки не для всех пунктов списка, а только для одного выбранного пункта. За счет этого, меню с присоединенным (appended) подсписком требует меньше ресурсов.

Подсписок в коде шаблона не вложен в список, а присоединяется к нужному пункту списка с помошью простого кода, написанного на JavaScript.

Чтобы создать меню

Назначьте одному из блоков страницы шаблон для списка: menu_VVa_list. Через кнопки редактирования дайте пунктам списка имена.

Щелкните по первой ссылке списка - откроется новая пустая страница. Назначьте ей какой-нибудь шаблон. В этом шаблоне теперь под меню должны быть предусмотрены два отдельных блока. В первый из этих блоков делегируйте блок со списком, созданный на предыдущей странице, а второму блоку назначьте новый шаблон menu_VVa_sublist.

После назначения подсписка, тот, благодаря JavaScript, окажется не на том месте, где его назначали, а под выбранным пунктом списка. Назначьте пунктам подсписка имена, и т.д.

Список

menu_VVa_list.tpl 
<?php

if (empty($tab)) 
    return;

echo "<ul>";
foreach ($tab as $dat)
{
    echo "<li"; 
    if (Router::hrefIsAncestor("?page=$dat[1]"))
        echo " id='menu_VVa_listItem'";     
    echo ">{$dat['edit']}";
    # Ссылка. Выделение предков страницы    
    if ($dat[1] == $page)
        echo $dat[2];
    else 
    {
        echo "<a href='?page=$dat[1]'";
        if (Router::hrefIsAncestor("?page=$dat[1]"))
            echo " class='ancestor'";
        echo ">$dat[2]</a>";
    }
    echo "</li>";
}
echo "</ul>"; 
?>

menu_VVa_list.tdd 
<?php

$titles[2] = "Название ссылки";

$types[1] = "page";
$types[2] = "varchar(99)";

$params['multi-record'] = true;
$params['description'] = 
"Шаблон со списком ссылок. 
После перехода по одной из ссылок этого шаблона, 
на другой странице можно назначить 
подсписок ссылок (шаблон menu_VVa_sublist)";

?>

Подсписок

menu_VVa_sublist.tpl 
<?php
if (empty($tab)) 
    return;

echo "<ul id='menu_VVa_sublist'>";
foreach ($tab as $dat)
{
    # Ссылка. Выделение предков страницы 
    echo "<li>{$dat['edit']}";
    if ($dat[1] == $page)
        echo $dat[2];
    else 
    {
        echo "<a href='?page=$dat[1]'";
        if (Router::hrefIsAncestor("?page=$dat[1]"))
            echo " class='ancestor'";
        echo ">$dat[2]</a>";
    } 
    echo "</li>";
}
echo "</ul>"; 
?>

<script type='text/javascript'>
    // Присоединяет подсписок из этого шаблона
    // к выбранному пункту списка из шаблона menu_VVa_list
    var VVa_listItem= document.getElementById('menu_VVa_listItem');
    var VVa_sublist = document.getElementById('menu_VVa_sublist');
    VVa_listItem.appendChild(VVa_sublist);
</script>

menu_VVa_sublist.tdd 
<?php

$titles[2] = "Название ссылки";

$types[1] = "page";
$types[2] = "varchar(99)";

$params['multi-record'] = true;
$params['description'] = 
"Шаблон с подсписком ссылок. 
Визуально подсписок выглядит, 
как вложенный в родительский пункт списка
с шаблоном menu_VVa_list, 
однако в коде подсписок идет отдельно после списка.";

?>