Работаю по всей России

vasilisa1210@mail.ru

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

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

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

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

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

  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>

  2. Записываем в шаблон

    <div> <div>  [[Wayfinder? &startId=`0`&level=`1` &rowTpl=`zagmenuleft`&outerTpl =`zx`]]</div> </div>

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

    &level  -  сколько уровней подменю выводить (число, по умолчанию =0)

  3. Создаем чанк 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>

  4. Создаем чанк zx          

    <ul><class="menu">[+wf.wrapper+]</ul>


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

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

<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>    

  1. Записываем в шаблон:

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

  2. Создаем чанк tpl_menu с таким содержанием:

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

  3. В файле стиля заменяем 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>

 

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

 

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

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

&hideSubMenus=`true`

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

&ignoreHidden=`true`

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

&removeNewLines=`true`

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

&excludeDocs=`1, 4, 46`

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

&hereClass=`active`

 

Сортировка

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

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

 

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


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

Похожие уроки

Встроенные конфигурации Wayfinder, выпадающее меню 

Документация по [Evo] Wayfinder

Уровневое меню

Фильтрация меню



x