Для создания динамического меню мы воспользуемся готовым сниппетом Wayfinder. Сниппет, как вы, надеюсь, помните из предыдущих уроков, это кусок Php кода, который мы можем включать в наш шаблон. Отличие от чанков только в коде и методе вызова. Если чанк мы вызываем с помощью двойных фигурных скобок, то сниппеты вызываются с помощью таких [!Имя_сниппета!] - некэшируемый вызов, или таких [[Имя_сниппета]] - кэшируемый вызов. Код каждого сниппета должен начинаться с <?php а заканчиваться ?>. Помимо этого, каждому сниппету можно передавать специальные значения параметров, которые он будет обрабатывать. В MODx уже есть несколько готовых сниппетов, которые мы будем в дальнейшем использовать.

Сниппет Wayfinder служит для организации списков ссылок для MODx. Меню нашего сайта и есть список таких ссылок. Давайте для начала найдем кусок кода, отвечающего за вывод нашего меню. Меню находится в чанке HEADER, вот оно:

        <div id="templatemo_menu">
        
            <ul>
                <li><a href="index.html" class="current">Welcome</a></li>
                <li><a href="blog.html">Design Blog</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="company.html">Our Company</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>        
        
        </div> <!-- end of templatemo_menu -->

Давайте вырежем этот код, вместо него напишем:

{{MENU}}

А код вставим в новый чанк MENU, в описании чанка напишем Меню сайта. Теперь давайте изучим этот код.

Меню нашего сайта представляет собой простой, ненумерованный список, находящийся в контейнере с id="templatemo_menu". Давайте вырежем этот список из контейнера и вместо него вставим вызов нашего сниппета:

        <div id="templatemo_menu">        

[!Wayfinder? &startId=`0`!]             

        </div> <!-- end of templatemo_menu -->

&startId=`0` - это параметр со значением 0, который указывает сниппету ID папки, в которой  лежат обрабатываемые документы. Все наши документы, которые мы будем отображать в меню, лежат в корневой папке, ID корневой папки равен нулю. Давайте посмотрим, что у нас получилось.

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

Чтобы понять, почему это произошло, нам надо посмотреть исходный код страницы. В Mozilla Firefox это делается таким образом: Вид >> Исходный код страницы или просто нажав сочетание клавиш Ctrl+U. Находим код нашего меню:

        <div id="templatemo_menu">
        
<ul><li class="active"><a href="http://site/" title="Главная" >Главная</a></li>
<li><a href="/blog-o-dizajne.html" title="Блог о дизайне" >Блог о дизайне</a></li>
<li><a href="/portfolio.html" title="Портфолио" >Портфолио</a></li>
<li><a href="/o-kompanii.html" title="О компании" >О компании</a></li>
<li class="last"><a href="/kontaktyi.html" title="Контакты" >Контакты</a></li>
</ul>        
        
        </div> <!-- end of templatemo_menu -->

Обращаем внимание на то, что в исходном коде у активного пункта был class="current", а наш сниппет автоматически присваивает активному пункту class="active". Замечаем еще тот момент, что в исходном коде класс применялся к тегу <a>, а теперь к тегу <li>. Переписывать сниппет мы не будем, а вот поменять класс в стилях - нет проблем.

Находим в папке C:/xampp/htdocs/site/www/assets/templates/ файл templatemo_style.css и открываем его с помощью Notepad++. Ищем в этом файле описание класса current, оно находится в 198 строке:

#templatemo_menu li .current{
    padding-left: 40px;
    color: #ffffff;
}

заменяем класс current на active, не забывая переназначить его тегу <a>:

#templatemo_menu li.active a {
    padding-left: 40px;
    color: #ffffff;
}

Сохраняем файл. Смотрим, что получилось.
Наше меню заработало точно так, как это задумывали дизайнеры. Теперь мы можем переходить по страницам нашего сайта с помощью нашего главного меню. При добавлении в корневую папку других документов, они автоматически будут отображаться в нашем меню. Чтобы нежелательные документы не отображались в меню, у них следует убрать галочку с Показывать в меню. Можно принудительно исключить нежелательный пункт с помощью параметра &excludeDocs=`список id исключаемых документов, через запятую`.

Чтобы в меню не отображались дочерние документы, которые мы будем создавать на следующих уроках, давайте добавим в вызов сниппета параметр level, который определяет количество уровней в меню, по умолчанию будут отображаться все уровни, ограничим только одним уровнем:

        <div id="templatemo_menu">        

[!Wayfinder? &startId=`0` &level=`1`!]             

        </div> <!-- end of templatemo_menu -->

На этом наш урок можно считать законченным. Тот, кто хочет подробнее познакомиться с параметрами Wayfinder, может найти их в документации к сниппету.