pdoMenu — документация и примеры создания меню в MODX

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

Создавать динамическое меню в MODX мы будем при помощи сниппета PdoMenu (замена устаревшего Wayfinder) из пакета pdoTools. Перед тем как начать ознакомьтесь с основной документацией.

Документация по pdoMenu

pdoMenu по умолчанию принимает общие параметры pdoTools и некоторые свои.

Параметры

Параметры шаблонов

Эти параметры устанавливают чанки, которые содержат шаблоны для генерации меню.

Параметры CSS классов

Эти параметры задают значение плейсхолдеров [[+classnames]] и [[+classes]] для различных элементов меню. Плейсхолдер [[+classnames]] выводит только название класса без атрибута class="", в отличие от плейсхолдера [[+classes]].

Официальные примеры

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

[[pdoMenu?
    &parents=`0`
    &level=`1`
]]

Вывод с исключением определенных родителей и проверкой разрешений пользователя:

[[pdoMenu?
    &parents=`-10,-15`
    &level=`2`
    &checkPermissions=`load,list,view`
]]

Вывод меню сразу из двух родителей, с показом корневых точек:

[[pdoMenu?
    &parents=`10,15`
    &displayStart=`1`
]]

Вывод двух уровней ресурсов с подсчетом количества вложенных:

[[pdoMenu?
    &parents=`0`
    &level=`2`
    &tplInner=`@INLINE [[+wrapper]]`
    &tplParentRow=`@INLINE <li [[+classes]]><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a> ([[+children]])</li>[[+wrapper]]`
    &countChildren=`1`
]]

Официальную документацию можете почитать здесь. А сейчас разберем самые типовые вызовы меню.

Вызов PdoMenu

Вариант 1. На месте этого статического меню вызовем сниппет pdoMenu, для этого в дереве ресурсов, на вкладке “Элементы” в разделе сниппеты разверните ветку pdoTools, далее нажмите на pdoMenu левой кнопкой мыши (не отпускайте кнопку) и перетащите этот сниппет в место, где вы хотите вызвать меню, далее в открывшемся окошке заполните необходимые параметры и нажмите «Сохранить«.

Вариант 2. Просто вручную пишем вызов.

Типовые примеры

Обычное одноуровневое меню

К примеру у нас самое обычное меню, со следующей html разметкой (взял меню из подвала / footer).

<ul>
     <li><i class="bi bi-chevron-right"></i> <a href="#">Home</a></li>
     <li><i class="bi bi-chevron-right"></i> <a href="#">About us</a></li>
     <li><i class="bi bi-chevron-right"></i> <a href="#">Services</a></li>
     <li><i class="bi bi-chevron-right"></i> <a href="#">Terms of service</a></li>
     <li><i class="bi bi-chevron-right"></i> <a href="#">Privacy policy</a></li>
</ul>

К примеру нам в него нужно вывести только ресурсы первого уровня, у которых в настройках не стоит галка на против пункта «Скрыть из меню». Тогда вызов получится следующим:

[[pdoMenu?
	&parents=`0`
	&level=`1`
	&firstClass=`0`
	&lastClass=`0`
	&tpl=`@INLINE <li[[+classes]]><i class="bi bi-chevron-right"></i> <a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
]]

{'pdoMenu' | snippet : [
	'parents' => '0',
	'level' => '1',
	'firstClass' => '0',
	'lastClass' => '0',
	'tpl' => '@INLINE <li{$classes}><i class="bi bi-chevron-right"></i> <a href="{$link}" {$attributes}>{$menutitle}</a>{$wrapper}</li>'
]}

где:

• &parents=`0` — список родителей (т.е. берем все ресурсы).
• &lastClass=`0` — класс последнего пункта меню (он как обычно не нужен);
• &firstClass=`0` — класс для первого пункта меню (он как обычно не нужен);
• &level=`1` — уровень вложенности (в данном случае 1);
• &tpl=`@INLINE <li[[+classes]]><i class="bi bi-chevron-right"></i> <a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>` — чанк оформления пункта меню;

В свежей версии PdoTools заметил особенность, если не указать &parents=`0`, то вообще ничего не выводится.

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

• &showHidden=`1` — показываем даже те ресурсы у которых стоит галка в настройках ресурса у пункта не Скрыть из меню;
• &resources=`1,6,7,8` — список ресурсов (их id), которые нужно вывести в меню;

Усложняем задачу.

Выпадающее меню на MODX

Берем полную разметку нашего верхнего меню:

<nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto active" href="#hero">Home</a></li>
          <li><a class="nav-link scrollto" href="#about">About</a></li>
          <li><a class="nav-link scrollto" href="#services">Services</a></li>
          <li><a class="nav-link scrollto" href="#portfolio">Portfolio</a></li>
          <li><a class="nav-link scrollto" href="#team">Team</a></li>
          <li><a href="blog.html">Blog</a></li>
          <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
            <ul>
              <li><a href="#">Drop Down 1</a></li>
              <li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
                <ul>
                  <li><a href="#">Deep Drop Down 1</a></li>
                  <li><a href="#">Deep Drop Down 2</a></li>
                  <li><a href="#">Deep Drop Down 3</a></li>
                  <li><a href="#">Deep Drop Down 4</a></li>
                  <li><a href="#">Deep Drop Down 5</a></li>
                </ul>
              </li>
              <li><a href="#">Drop Down 2</a></li>
              <li><a href="#">Drop Down 3</a></li>
              <li><a href="#">Drop Down 4</a></li>
            </ul>
          </li>
          <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
          <li><a class="getstarted scrollto" href="#about">Get Started</a></li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

Убрал из разметки <li class="dropdown megamenu">...</li>. Здесь у нас больше лендинговое меню, с якорными ссылками, и обычными, которое можно посадить примерно так:

<nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto active" href="[[~1]]#hero">Главная</a></li>
          <li><a class="nav-link scrollto" href="[[~1]]#about">О нас</a></li>
          <li><a class="nav-link scrollto" href="[[~1]]#services">Услуги</a></li>
          <li><a class="nav-link scrollto" href="[[~1]]#portfolio">Портфолио</a></li>
          <li><a class="nav-link scrollto" href="[[~1]]#team">Команда</a></li>
          <li><a href="[[~8]]">Блог</a></li>
          <li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
            [[!pdoMenu?
                &parents=`3`
            	&lastClass=`0`
            	&firstClass=`0`
            	&level=`3`
            	&tpl=`@INLINE <li><a[[+classes]] href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
            	&tplParentRow=`@INLINE <li class="dropdown"><a href="[[+link]]"[[+classes]] [[+attributes]]>[[+menutitle]] <i class="bi bi-chevron-down"></i></a>[[+wrapper]]</li>`
            	&tplInner=`@INLINE <ul[[+classes]]>[[+wrapper]]</ul>`
            ]] 
          </li>
          <li><a class="nav-link scrollto" href="[[~1]]#contact">Контакты</a></li>
          <li><a class="getstarted scrollto" href="[[~1]]#about">Быстрый старт</a></li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

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

[[!pdoMenu?
    &parents=`0`
	&lastClass=`0`
	&firstClass=`0`
	&level=`3`
	&tplOuter=`@INLINE <nav id="navbar" class="navbar"><ul>[[+wrapper]]</ul><i class="bi bi-list mobile-nav-toggle"></i></nav>`
	&tpl=`@INLINE <li><a[[+classes]] href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
	&tplParentRow=`@INLINE <li class="dropdown"><a href="[[+link]]"[[+classes]] [[+attributes]]>[[+menutitle]] <i class="bi bi-chevron-down"></i></a>[[+wrapper]]</li>`
	&tplInner=`@INLINE <ul[[+classes]]>[[+wrapper]]</ul>`
]]

{'!pdoMenu' | snippet : [
    'parents' => '0',
	'lastClass' => '0',
	'firstClass' => '0',
	'level' => '3',
	'tplOuter' => '@INLINE <nav id="navbar" class="navbar"><ul>{$wrapper}</ul><i class="bi bi-list mobile-nav-toggle"></i></nav>',
	'tpl' => '@INLINE <li><a{$classes} href="{$link}" {$attributes}>{$menutitle}</a>{$wrapper}</li>',
	'tplParentRow' => '@INLINE <li class="dropdown"><a href="{$link}"{$classes} {$attributes}>{$menutitle} <i class="bi bi-chevron-down"></i></a>{$wrapper}</li>',
	'tplInner' => '@INLINE <ul{$classes}>{$wrapper}</ul>'
]}

Пример 2

Разметка у нас имеет следующий код:

<ul class="nav nav-pills" id="mainNav">
	<li><a href="demo-auto-services.html" class="nav-link active">Home</a></li>
	<li><a href="demo-auto-services-about-us.html" class="nav-link">About</a></li>
	<li class="dropdown">
		<a href="demo-auto-services-services.html" class="nav-link dropdown-toggle">Services</a>
		<ul class="dropdown-menu">
			<li><a href="demo-auto-services-services-detail.html" class="dropdown-item">Brake Repair</a></li>
			<li><a href="demo-auto-services-services-detail.html" class="dropdown-item">Check Engine</a></li>
			<li><a href="demo-auto-services-services-detail.html" class="dropdown-item">Suspension Repair</a></li>
			<li><a href="demo-auto-services-services-detail.html" class="dropdown-item">Transmission Repair</a></li>
			<li><a href="demo-auto-services-services-detail.html" class="dropdown-item">A/C Repair</a></li>
		</ul>
	</li>
	<li><a href="demo-auto-services-products.html" class="nav-link">Products</a></li>
	<li><a href="demo-auto-services-blog.html" class="nav-link">Blog</a></li>
	<li><a href="demo-auto-services-appointment.html" class="nav-link">Appointment</a></li>
	<li><a href="demo-auto-services-contact.html" class="nav-link">Contact</a></li>
</ul>

Вызов получается вот таким:

[[!pdoMenu?
    &parents=`0`
	&lastClass=`0`
	&firstClass=`0`
	&level=`2`
	&outerClass=`nav nav-pills`
	&tplOuter=`@INLINE <ul[[+classes]] id="mainNav">[[+wrapper]]</ul>`
	&rowClass=`nav-link`
	&innerClass=`dropdown-menu`
	&tpl=`@INLINE <li><a[[+classes]] href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
	&parentClass=`dropdown-toggle`
	&tplParentRow=`@INLINE <li class="dropdown"><a href="[[+link]]"[[+classes]][[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
    &innerClass=`dropdown-menu`
	&tplInner=`@INLINE <ul[[+classes]]>[[+wrapper]]</ul>`
]]

По текущему сайту все, но для закрепления результатов приведу еще примеры.

Пример 3: выпадающее меню на bootstrap 5

Возьмём разметку bootstrap 5 со стабильной версии к примеру 5.1: https://getbootstrap.com/docs/5.1/components/navbar/#supported-content

Если убрать обвертку с бургером (кнопкой) и окошко поиска, то статический html код выглядит так:

     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>

Вывод bootstrap 5 navbar при помощи pdoMeny будет следующим:

[[!pdoMenu?
    &level=`2`
    &parents=`0`
    &firstClass=`0`
    &lastClass=`0`
    &rowClass=`nav-item`
    &tpl=`@INLINE <li itemprop="name"[[+classes]]><a class="nav-link" href="[[+link]]"[[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
    &parentClass=`dropdown`
    &outerClass=`navbar-nav me-auto mb-2 mb-lg-0`
    &tplOuter=`@INLINE <ul[[+classes]] itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope">[[+wrapper]]</ul>`
    &tplInner=`@INLINE <ul class="dropdown-menu" aria-labelledby="navbarDropdown">[[+wrapper]]</ul>`
    &tplInnerRow=`@INLINE <li><a itemprop="url" class="dropdown-item" href="[[+link]]"[[+attributes]]>[[+menutitle]]</a></li>[[+wrapper]]`
    &tplParentRow=`@INLINE <li[[+classes]]><a itemprop="url" class="nav-link dropdown-toggle" href="[[+link]]" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"[[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
]]

Внедрение микроразметки schema.org в MODX меню

Простенькое меню с микроразметкой выглядит так:

<ul itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope">
   <li itemprop="name"><a itemprop="url" href="#">Link1</a></li>
   <li itemprop="name"><a itemprop="url" href="#">Link2</a></li>
</ul>

С внедрением такой разметки думаю проблем не возникнет, а вот уже многоуровеневое меню имеет более сложную разметку, выглядит она так:

<nav itemscope="" itemtype="http://schema.org/SiteNavigationElement">
	<ul itemprop="about" itemscope="" itemtype="http://schema.org/ItemList">
		<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
			<a href="https://web-revenue.ru/" itemprop="url"><span itemprop="name">Главная</a></span>
		</li>		
		<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
			<a href="https://web-revenue.ru/information/" itemprop="url"><span itemprop="name">Информация</a></span>			
			<ul itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
				<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
					<a href="https://web-revenue.ru/information/uchebnye-stati/" itemprop="url"><span itemprop="name">Учебные статьи</a></span>
				</li>				
				<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
					<a href="https://web-revenue.ru/information/spravochnyj-centr/" itemprop="url"><span itemprop="name">Справочный центр</a></span>
				</li>
			</ul>
		</li>		
		<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
			<a href="https://web-revenue.ru/kontakty/" itemprop="url"><span itemprop="name">Контакты</a></span>			
		</li>
	</ul>
</nav>

Здесь уже сложнее и не каждый додумается как внедрить.

Вывод 2-х уровневого bootstrap 5 меню со schema.org

Здесь нам уже нужно захватить вместе с меню его дочерний элемент div, и он должен получиться следующим.

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    [[!pdoMenu?
        &level=`2`
        &parents=`0`
        &firstClass=`0`
        &lastClass=`0`
        &rowClass=`nav-item`
        &tpl=`@INLINE <li itemprop="name"[[+classes]]><a class="nav-link" href="[[+link]]"[[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
        &parentClass=`dropdown`
        &outerClass=`navbar-nav ms-auto mb-2 mb-lg-0`
        &tplOuter=`@INLINE <ul[[+classes]] itemprop="about" itemscope="" itemtype="http://schema.org/ItemList">[[+wrapper]]</ul>`
        &tplInner=`@INLINE <ul class="dropdown-menu" aria-labelledby="navbarDropdown" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">[[+wrapper]]</ul>`
        &tplInnerRow=`@INLINE <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a itemprop="url" class="dropdown-item" href="[[+link]]"[[+attributes]]><span itemprop="name">[[+menutitle]]</span></a></li>[[+wrapper]]`
        &tplParentRow=`@INLINE <li[[+classes]] itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"><a itemprop="url" class="nav-link dropdown-toggle" href="[[+link]]" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"[[+attributes]]><span itemprop="name">[[+menutitle]]</span></a>[[+wrapper]]</li>`
    ]]
</div>

Проверить правильность микроразметки можно в инструментах от яндекс и google.

Css код для тех кто хочет, чтобы меню выпадало при наведении курсора мышки.

.dropdown:hover > .dropdown-menu {display:block;}

Трехуровневое (многоуровневое) меню с валидной микроразметкой.

Данное меню из шаблона Eterna (для 2х уровней нужно выставлять атирбуты rel="category").

<nav class="nav-menu d-none d-lg-block" itemscope itemtype="http://schema.org/SiteNavigationElement">
  <ul itemprop="about" itemscope itemtype="http://schema.org/ItemList">
    {'!pdoMenu' | snippet : [
        'level' => 3,
        'parents' => 0,
        'firstClass' => '0',
        'lastClass' => '0',
        'tpl' => '@INLINE <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"{$classes}><a href="{$link}"{$attributes}>{$menutitle}</a><meta itemprop="name" content="{$menutitle}"/>{$wrapper}</li>',
        'parentClass' => 'drop-down',
        'tplOuter' => '@INLINE {$wrapper}',
        'tplInner' => '@INLINE <ul>{$wrapper}</ul>',
        'tplInnerRow' => '@INLINE <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"{$classes}><a itemprop="url" href="{$link}" {$attributes}>{$menutitle}</a><meta itemprop="name" content="{$menutitle}"/></li>{$wrapper}',
        'tplParentRow' => '@INLINE <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList"{$classes}><a itemprop="url" href="{$link}" {$attributes}>{$menutitle}</a><meta itemprop="name" content="{$menutitle}"/>{$wrapper}</li>',
        'tplCategoryFolder' => '@INLINE <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList" class="drop-down"><a itemprop="url" href="{$link}" {$attributes}>{$menutitle}</a><meta itemprop="name" content="{$menutitle}"/>{$wrapper}</li>'
    ]}
</ul>
</nav>

Совет. Комментируйте код своего меню <!—код меню—> делайте свой вывод, если что-то не работает сравнивайте его с закомментированным и правьте недочеты.

Вывод многоуровневого Bootstrap 3 меню (с неограниченной вложенностью).

Вывод многоуровневого меню будет таким:

[[pdoMenu? 
&level=`5` 
&parents=`0` 
&firstClass=`0` 
&lastClass=`0` 
&parentClass=`dropdown` 
&outerClass=`nav navbar-nav` &levelClass=`submenu` 
&tplOuter=`@INLINE <ul [[+classes]]>[[+wrapper]]</ul>` 
&tplInner=`@INLINE <ul class="dropdown-menu">[[+wrapper]]</ul>` 
&tplParentRow=`@INLINE <li [[+classes]]><a class="dropdown-toggle" data-toggle="dropdown" href="[[+link]]" [[+attributes]]>[[+menutitle]]<span class="caret"></span></a>[[+wrapper]]</li>` 
]]

Из коробки оно работать не будет. так как Bootstrap 3 по умолчанию поддерживает только 2 уровня вложенности, и для того что бы расширить уровень вложенности bootstrap 3 меню, необходимо подключить js файл со следующим содержанием.

(function($){ 
$(document).ready(function(){ 
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { 
event.preventDefault(); 
event.stopPropagation(); 
$(this).parent().siblings().removeClass('open'); 
$(this).parent().toggleClass('open'); 
});
 }); 
})(jQuery);

После того начнется открываться 3й, 4й и т.д. уровни вложенности. В принципе все, но есть одно но, данное меню будет открываться вниз все уровни, а это по-моему не особо правильно и красиво, но это поправимо при помощи CSS.

В моем случае получилось 2 строки CSS кода, чтобы уровни выпадали в бок.

ul.dropdown-menu {left: 100%;top: -8px;}
li.submenu1.dropdown.open>ul.dropdown-menu {left: 0%; top: 100%;}

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

Видео

В моем видео вышло вот такое меню

Если вам нужно повернуть треугольнички в выпадающем меню (они направлены в низ, когда выпадают элементы влево), что бы получилось вот так.

Тогда добавьте следующий css код:

li.submenu2.dropdown>a>span.caret {
-moz-transform:rotate(-95deg);
-ms-transform:rotate(-95deg);
-webkit-transform:rotate(-95deg);
-o-transform:rotate(-95deg);
transform:rotate(-95deg)
}

li.submenu3.dropdown>a>span.caret {
-moz-transform:rotate(-95deg);
-ms-transform:rotate(-95deg);
-webkit-transform:rotate(-95deg);
-o-transform:rotate(-95deg);
transform:rotate(-95deg)
}

li.submenu4.dropdown>a>span.caret {
-moz-transform:rotate(-95deg);
-ms-transform:rotate(-95deg);
-webkit-transform:rotate(-95deg);
-o-transform:rotate(-95deg);
transform:rotate(-95deg)
}

В следующем уроке разберем сниппет pdoResources.