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

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

В каждом пункте списка будут появляться дополнительные кнопки редактирования - для назначения шаблона для подсписка. Но не торопитесь сразу назначать шаблоны, иначе вы получите неправильное древо сайта (см. Порядок назначения шаблонов).

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

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

Назначьте пунктам подсписка имена, и т.д.

<?php

if (empty($tab))
    return;

echo "<ul>";
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 $dat[3];
    echo "</li>";
}
echo "</ul>";

?>

<?php

$titles[2] = "Название ссылки";
$titles[3] = "Подсписок ссылок";

$types[1] = "page";
$types[2] = "varchar(99)";
$types[3] = "block template('menu_VVn_sublist')";

$params['multi-record'] = true;
$params['description'] = "
Шаблон со списком ссылок.
К каждому пункту списка можно назначить
подсписок ссылок (шаблон menu_VVn_sublist)
";

?>

Подсписок

<?php

if (empty($tab))
    return;

echo "<ul>";
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>";

?>

<?php

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

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

$params['multi-record'] = true;
$params['description'] = "Шаблон с подсписком ссылок.";

?>

Добавляем динамику

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

Правда меню с выпадающими списками было динамичным, так как "горизонтально-вертикальное" меню в статичном виде почти не используется.

Наше "вертикально-вертикальное" меню можно сделать динамичным, например, с вылетающими (flyout) подсписками, как на рисунке.

Можно сделать другой вариант, когда подсписок разворачивается внутри списка. Если сделать несколько подуровней, получится древовидное меню (tree view menu).

Вся эта динамика потребует дополнительного программирования на JavaScript. Можно воспользоваться, например, прекрасным плагином jsTree из библиотеки jQuery.

Но есть простое статичное решение, которое рассматривается в следующей статье: Вертикальное меню с присоединенным подсписком.

• Порядок назначения шаблонов для навигационных блоков разных уровней
• Примеры меню 
  • Горизонтальное меню-подменю
  • Горизонтальное меню с выпадающими списками
  • Вертикальное меню с вложенными подсписками
  • Вертикальное меню с присоединенным подсписком