[Modx Evo] Меню как создать свой шаблон отображения
Для того что бы создать свой шаблон отображения меню надо сделать так, как изложено ниже.
Пример меню на 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 — шаблон контейнера под-меню:
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 (номер в меню)