Главная » Уроки » Уроки по Modx Evo » [Modx Evo] Меню как создать свой шаблон отображения

[Modx Evo] Меню как создать свой шаблон отображения

Когда используете Wayfinder, то следите за параметром &level и выдавайте по возможности кэшированным, тоесть в квадратных скобках, без восклицательного знака.

Для того что бы создать свой шаблон отображения меню надо сделать так, как изложено ниже.

Пример меню на EVO MODX Wayfinder номер 1

Допустим в шаблоне есть меню такого вида:
<div><div><ul><class="menu">
                   <li><a href="index.html"><span><span>ГЛАВНАЯ</span></span> </a></li>
                    <li><a href="o_nas.html"><span><span>О ШКОЛЕ</span></span> </a></li>
                    <li><a href="programmyi_poxudeniya.html"><span><span>ОБ АВТОРЕ</span></span> </a></li>
                    <li><a href="xudeem_pravilno.html"><span><span>ПОДДЕРЖКА</span></span> </a></li>
                    <li><a href="dieta_dlya_poxudeniya.html"><span><span>ГАРАНТИИ</span></span> </a></li>
                    <li><a href="otzyivyi.html"><span><span>ВОПРОСЫ</span></span> </a></li>
                    <li><a href="kontaktyi.html"><span><span>КОНТАКТЫ</span></span></span> </a></li>
                    <li><a href="czenyi.html"><span><span>ЦЕНА</span></span> </a></li>
</ul></div></div>
Записываем в шаблон
<div> <div> [[Wayfinder? &startId=`0`&level=`1` &rowTpl=`zagmenuleft`&outerTpl =`zx`]]</div> </div>

&startId - номер Id документа откуда будут браться пункты меню

&level - сколько уровней подменю выводить (число, по умолчанию =0)
Создаем чанк zagmenuleft
<li><a [+wf.id+][+wf.classes+] href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]><span><span>[+wf.linktext+]</a>[+wf.wrapper+]</span></span></li>
Создаем чанк zx
<ul><class="menu">[+wf.wrapper+]</ul>

Пример меню на EVO MODX Wayfinder номер 2

Теперь у нас в шаблоне меню такого вида, самого простого:

<ul> <li><a href="index.html" class="current">Главная</a></li>
<li><a href="partners.html">Услуги</a></li>
<li><a href="about.html">Стоимость</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>

Записываем в шаблон:
[!Wayfinder? &startId=`0` &rowTpl=`tpl_menu` !]
Создаем чанк tpl_menu с таким содержанием:
<li><a [+wf.id+][+wf.classes+] href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a>[+wf.wrapper+]</li>
В файле стиля заменяем current на active:
#templatemo_menu ul li .active {color: #fff;}

Пример меню на EVO MODX Wayfinder с подменю

Создайте картинки 4 шт - меню актив, меню при наведении, подменю актив, подменю при наведении.

Пропишите стили css

/* меню левое*/

ul.menuleft {
   color : #FFFFFF;
   list-style:none;
margin-left : 3px;
}

ul.menuleft li a {
   color : #FFFFFF;
        font-size : 23px;
   text-decoration: none;
   font-family: "Monotype Corsiva";
   padding: 5px 0 3px 32px;
        line-height: 35px;
}
ul.menuleft{
   padding-left:15px;
}

ul.menuleft li li a:hover, ul.menuleft li li a:active{
color: #67bcdd;
}

ul.menuleft li a:hover {
   background:url(images/zv.jpg) left center no-repeat;
}

ul.menuleft .active li a {
   background:url(images/zvamin.jpg) left center no-repeat;
}
ul.menuleft .active a {
   background:url(images/zva.jpg) left center no-repeat;
}

ul.menuleft li li a:hover {
   background:url(images/zvmin.jpg) left center no-repeat;
}
/* /меню левое*/

Стандартные шаблоны EVO MODX Wayfinder

outerTpl шаблон всего контейнера меню:

<ul id="myajaxmenu"> [+wf.wrapper+] </ul>

rowTpl шаблон пункта меню:

<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li[+wf.classes+]>

innerTpl — шаблон контейнера под-меню:

<ul[+wf.classes+]>[+wf.wrapper+]</ul>

innerRowTpl — шаблон под-пунктов:

<li[+wf.classes+]><a href="[+wf.link+]"title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

hereTpl — шаблон активного пункта меню:

<li[+wf.classes+]><span>[+wf.linktext+]</span>[+wf.wrapper+]</li>

Плейсхолдеры для шаблонов:

[+wf.classes+] — будет заменен классом (включая)
[+wf.classnames+] — будет заменен именем класса (без)
[+wf.link+] — место для гиперссылки (значения href)
[+wf.title+] — место для текста атрибута title для ссылки
[+wf.linktext+] — место вставки текста гиперссылки
[+wf.wrapper+] — место вставки подменю
[+wf.id+] — место вставки уникального id
[+wf.attributes+] — место вставки атрибутов ссылки
[+wf.docid+] — место вставки идентификатора текущего документа
[+wf.description+] — описание документа

Основные настройки

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

&hideSubMenus=`true`

Не обращать внимания на галочки показывать или не показывать в меню:

&ignoreHidden=`true`

Не переносить строку при выводе:

&removeNewLines=`true`

Не выводить все документы указанные через запятую:

&excludeDocs=`1, 4, 46`

Класс (css) отображения активного пункта меню:

&hereClass=`active`

Сортировка

&sortOrder (порядок сортировки)

ASC - по порядку
DSC - против порядка

По умолчанию: ASC

&sortBy (сортировать по)

id
menutitle (название пункат меню)
pagetitle (название документа)
introtext
menuindex
published (по дате публикации)
hidemenu
parent (по родителю)
isfolder
description (описание документа)
alias(название ссылки)
longtitle (расширенный заголовок)
type (тип докумена)
template (номер шаблона)

По умолчанию: menuindex (номер в меню)