Параметры шаблонов pdoMenu | Зона разработки

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

Небольшой оффтоп (кликните, чтобы раскрыть)

Блондинка едет в машине. И по радио говорят: «Вы слушаете радио Европа плюс». Блондинка удивлённо: «Откуда они знают?»

Шаблонов у pdoMenu больше 10. Вот их полный список. Давайте теперь последовательно их разберём.

Параметр tplOuter

Это самый первый параметр в описании. Он содержит или название чанка или код инлайн-чанка, который будет контейнером для пунктов меню. По-умолчанию, в нём указано @INLINE <ul[[+classes]]>[[+wrapper]]</ul>. Плейсхолдер [[+wrapper]] будет заменён на пункты меню. А в плейсхолдер [[+classes]] подставится значение параметра outerClass, в котором указывается класс контейнера меню. В принципе, можно сразу указать нужный класс в шаблоне. В этом случае параметр outerClass можно не использовать.

[[pdoMenu?
    &tplOuter = `@INLINE <ul class="myMenuWrapperClass">[[+wrapper]]</ul>`
    ...
]]

Параметр tpl

Он отвечает за формирование пунктов меню. В нём также указывается чанк (обычный или инлайн). По-умолчанию, он содержит шаблон элемента списка для контейнера, указанного в предыдущем параметре —

@INLINE <li[[+classes]]><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>

Мы тут видим элемент li, который содержит ссылку на страницу. За ссылку отвечает плейсхолдер [[+link]], который формируется согласно параметру scheme. Если вы используете относительные ссылки, то [[+link]] можно безболезненно заменить на [[+uri]].

Плейсхолдеры [[+attributes]] и [[+menutitle]] содержат значение полей ресурса link_attribute и menutitle соответственно. Тут надо отметить, что если поле menutitle пустое, то в плейсхолдер [[+menutitle]] будет записано значение поля pagetitle.

В плейсхолдере [[+classes]] хранятся классы, указанные в параметрах классов, за исключением параметров outerClass и innerClass. Эти параметры используются в шаблонах-контейнерах, указанных в tplOuter и tplInner соответственно. В документации про классы описано достаточно понятно.

Запомните!

Есть одна ломающая логическую парадигму тонкость — параметр шаблона для активных элементов меню имеет суффикс «Active», параметры текущих элементов — суффикс «Here» (tplHere, tplParentHere). А у классов — для активного пункта предназначен параметр hereClass со значением по-умолчанию «active», а для текущего пункта — параметр selfClass.

Было бы логичнее назвать их по аналогии с шаблонами activeClass и hereClass соответственно.

На всякий случай поясню, что текущий пункт — это текущая открытая страница, а активные пункты — это текущая страница и её родители.

Плейсхолдер [[+wrapper]] необходим для вывода следующего уровня меню. Если его убрать, то дочерние ресурсы показываться не будут, т.е. будет отображён только первый уровень меню.

В принципе этих двух параметров хватит для вывода меню. Достаточно указать родителя и уровень вложенности:

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

Параметр tplHere

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

[[pdoMenu?
    &parents=`0`
    &level=`2`
    &tplHere=`@INLINE <li [[+classes]]><span>[[+menutitle]]</span>[[+wrapper]]</li>`
]]

Параметр tplParentRow

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

У меня в разделе Документация этот параметр выглядит так

&tplParentRow = `@INLINE <li [[+classes]]><i class="fa fa-caret-right trigger"></i> <a href="[[+link]]">[[+menutitle]]</a><div class="collapsible">[[+wrapper]]</div></li>`

Параметр tplParentRowHere

В этом параметре указывается шаблон для открытой страницы-контейнера. Если вы указали шаблон в tplParentRow, то придётся определять шаблон и для этого параметра. В противном случае для текущего пункта меню будет использоваваться шаблон, указанный в параметре tplHere, который используется для обычных пунктов, т.е. не контейнеров.

Параметр tplParentRowActive

Шаблон, указанный в данном параметре, используется для отображения всех родителей текущей страницы. Т.е. если вы выбрали ресурс, находящийся на 3-ем уровне, то родительские пункты меню первого и второго уровня отрисуются согласно шаблону, указанному в этом параметре. Если его не указывать, то будет использован шаблон из tplParentRow (или tpl, если не указан tplParentRow).

Теперь давайте рассмотрим параметры для вложенного меню — tplInner, tplInnerRow и tplInnerHere.

Параметр tplInner

Шаблон из этого параметра является обёрткой для вложенных пунктов меню. Обычно это ul элемент. Т.е. он аналогичен шаблону tplOuter. И если его не указать, то tplOuter и будет использоваться.

Параметр tplInnerRow

Является аналогом tpl, но используется только для вложенных пунктов. Если не указан, то вместо него будет применён шаблон tpl.

Параметр tplInnerHere

Заменяет шаблон из tplHere для вложенных пунктов.

Вот как это выглядит.

<ul>                                               // tplOuter
    <li>Первый пункт. Содержит подменю. Активный   // tplParentRowActive
        <ul>                                       // tplInner
            <li>Первый подпункт, текущий</li>      // tplInnerHere
            <li>Второй подпункт</li>               // tplInnerRow
        </ul>
    </li>
    <li>Второй пункт. Содержит подменю             // tplParentRow
        <ul>                                       // tplInner
            <li>Первый подпункт</li>               // tplInnerRow
            <li>Второй подпункт</li>               // tplInnerRow
        </ul>
    </li>
    <li>Третий пункт</li>                          // tpl
</ul>

Параметр tplCategoryFolder

Этот параметр позволяет задать шаблон для отдельных пунктов меню. Вот что указано в документации —

Специальный чанк оформления категории. Категория — это документ с «isfolder = 1» и или нулевым шаблоном, или с атрибутом «rel=category»

Этот шаблон предназначен для каких-то специфических случаев.

Параметр levelClass

Это важный параметр. Он позволяет указать уровень пунктов меню через название класса. Т.е. если задать значение «level», то у элементов первого уровня будет класс «level1», у второго — «level2» и т.д. Это упрощает задачу оформления меню.

Надеюсь, стало более менее понятно.

Комментарии ()

Nikola 13 февраля 2017 # ↓ 0
Имеется такой кусок кода:
```
<ul>
				<li>
					<a href="#" class="bg-1">Эко био продукты</a>
					<ul class="drop animated">
						<li><a href="#">Эко био продукты</a></li>
						<li><a href="#">Супер Фуд (Super Food)</a></li>
						<li><a href="#">Фермерская продукция</a></li>
						<li><a href="#">Бытовая НЕ химия</a></li>
						<li><a href="#">Детские Био товары</a></li>
					</ul>
				</li>
				<li><a href="#" class="bg-2">Эко био косметика</a></li>
				<li><a href="#" class="bg-3">Акции</a></li>
				<li><a href="#" class="bg-4">Спец предложения</a></li>
			</ul>
```
Пытаюсь раскрутить на pdoMenu следующим образом:
```
[[pdoMenu? 
                    &level=`2` 
                    &parents=`22`
                    &tplOuter=`@INLINE [[+wrapper]]` 
                    &tplParentRow=`@INLINE <li [[+classes]]><a href="[[+link]]" [[+classes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
                    &tplInner=`@INLINE <ul [[+classes]]><span>[[+menutitle]]</span>[[+wrapper]]</li>`
                    &tplInnerRow=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a></li>`
                ]]
```
Есть предложения почему не получается?
:)
1. Сергей Шлоков 13 февраля 2017 # ↑ ↓ +1
  
  Пойдем по порядку.
  Совершенно не понятно, что не получается. Меню совсем не выводится или нет отдельных пунктов?
  По поводу шаблонов…
  — В tplOuter нужно указать тег ul.
  — В tplInner не нужно указывать menutitle. От tplOuter у вас он отличается только классом.
  — Вы везде указываете тег с классами, а сами классы не определяете.
  1. Nikola 13 февраля 2017 # ↑ ↓ 0
    На данный момент как есть:
    Как надо:
    
    [[pdoMenu? &level=`2` &parents=`22` &firstClass=`bg-1` &innerClass=`drop animated` &lastClass=`bg-4` &tplOuter=`@INLINE <ul>[[+wrapper]]</ul>` &tplParentRow=`@INLINE <li><a href="[[+link]]" [[+classes]]>[[+menutitle]]</a>[[+wrapper]]</li>` &tplInner=`@INLINE <ul [[+classes]]>[[+wrapper]]</ul>` &tplInnerRow=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a></li>` &tpl=`@INLINE <li><a href="[[+link]]" [[+classes]]>[[+menutitle]]</a></li>` ]]
    Я не знаю как подгрузить классы ко второму и третьему пунктам меню. Сергей, спасибо, что помогаете:E
    1. Сергей Шлоков 13 февраля 2017 # ↑ ↓ 0
      
      Если каждый пункт уникальный и нельзя использовать общий класс для пунктов уровня, то укажите свой класс для каждого документа в поле «Атрибуты ссылки» (в форме редактирования документа). Например,
      
      class="bg-2"
      Для третьего пункта соответственно, «bg-3» и т.д. Соответственно параметры классов у сниппета можно удалить. А в шаблонах &tpl и &tplParentRow вместо [[+classes]] указать [[+attributes]]. Это общая практика.
      
      В вашем случае классы содержат нумерацию. Поэтому можно использовать плейсхолдер [[+idx]] для указания номера пункта. Для этого нужно изменить шаблоны
      
      ... &tplParentRow=`@INLINE <li><a href="[[+link]]" class="bg-[[+idx]]">[[+menutitle]]</a>[[+wrapper]]</li>` &tpl=`@INLINE <li><a href="[[+link]]" class="bg-[[+idx]]">[[+menutitle]]</a></li>`
      1. Nikola 13 февраля 2017 # ↑ ↓ 0
        
        Благодарствую. Все работает.
Nikola 13 февраля 2017 # ↓ 0
```
&tplInner=`@INLINE <ul [[+classes]]><span>[[+menutitle]]</span>[[+wrapper]]</li>`
```
заменил опечатку в конце на
Однако все равно не помогает(

Эдуард 22 мая 2017 # ↓ 0

Не получается вывести правильно третий пункт меню, два выводит без проблем (( ставлю &level=`3` — все плывет
html код

<td class="menu-item   active">
  <div class="wrap">
	<a class="" href="#">
	  Категория
	  <div class="line-wrapper"><span class="line"></span></div>
	</a>
  </div>
</td>
<td class="menu-item dropdown">
  <div class="wrap">
	<a class="dropdown-toggle" href="#">
	  Категория 1
	  <div class="line-wrapper"><span class="line"></span></div>
	</a>
	<span class="tail"></span>
	<ul class="dropdown-menu">
	  <li class=" ">
		<a href="#" title="">Подкатегория 1.1</a>
	  </li>
	  <li class="dropdown-submenu ">
		<a href="#" title="">Подкатегория 1.2
		  <span class="arrow"><i></i></span>
		</a>
		<ul class="dropdown-menu">
		  <li class=" ">
			<a href="#" title="">Подкатегория 1.2.1
			</a>
		  </li>
		  <li class=" ">
			<a href="#" title="">Подкатегория 1.2.1
			</a>
		  </li>
		</ul>
	  </li>
	  <li class=" ">
		<a href="#" title="">Подкатегория 1.1
		</a>
	  </li>
	  <li class=" ">
		<a href="#" title="">Подкатегория 1.1
		</a>
	  </li>
	</ul>
  </div>
</td>

[[pdoMenu?
	  &parents=`0`
	  &level=`3`
	  &firstClass=`menu-item`
	  &hereClass=`active`
	  &lastClass=`menu-item`
	  &parentClass=`menu-item dropdown`
      &rowClass=`0`
	  &innerClass=`dropdown-menu`
	  &tplInner=`@INLINE <ul [[+classes]]>[[+wrapper]]</ul>`
	  &tplInnerRow=`@INLINE <li class=" "><a href="[[+link]]" title="[[+menutitle]]" [[+attributes]]>[[+menutitle]]</a> [[+wrapper]]</li>`
	  &tplInnerHere=`@INLINE <li class="active"><a href="[[+link]]" title="[[+menutitle]]" [[+attributes]]>[[+menutitle]]</a> [[+wrapper]]</li>`
	  &tplParentRow=`@INLINE <td [[+classes]]><div class="wrap"><a class="dropdown-toggle" href="[[+link]]" title="[[+menutitle]]" [[+attributes]]>[[+menutitle]]<div class="line-wrapper"><span class="line"></span></div></a><span class="tail"></span>[[+wrapper]]</div></td>`
	  &tpl=`@INLINE <td [[+classes]]><div class="wrap"><a href="[[+link]]" title="[[+menutitle]]" [[+attributes]]>[[+menutitle]]<div class="line-wrapper"><span class="line"></span></div></a> </div>[[+wrapper]]</td>`
	  ]]

Николай Каленников 28 мая 2017 # ↓ +1

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

Роман 20 октября 2017 # ↓ 0

Добрый день, не могли бы помочь с такой проблемой. Есть верстка многоуровневого меню типа

<ul class="head-menu nav navbar-collapse collapse nav-pills nav-justified">
                <li><a href="#">Пункт меню 1</a></li>
                <li><a href="#">Пункт меню 2</a></li>
                <li class="dropdown">
                  <a href="#" data-submenu="" data-toggle="dropdown" tabindex="0" aria-expanded="false">Пункт меню 3</a>
                  <ul class="dropdown-menu">
                    <li class="dropdown-submenu">
                      <a tabindex="0">Пункт меню 3.1<span class="arw"></span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Пункт меню 3.1.1</a></li>
                        <li><a href="#">Пункт меню 3.1.2</a></li>
                        <li><a href="#">Пункт меню 3.1.3</a></li>
                        <li><a href="#">Пункт меню 3.1.4</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Пункт меню 4 <span class="arw"></span></a></li>
                    <li><a href="#">Пункт меню 5 <span class="arw"></span></a></li>
                  </ul>
                </li>
                <li><a href="#">Блог</a></li>
                <li><a href="#">Контакты</a></li>
              </ul>

И как видно пункты 3 и 3.1 имеют разные классы и у вложенных в них ссылок различные атрибуты, но как я понял они оба задаются параметром tplParentRow, но т.к. у них разные классы то стили работают некорректно, как бы это исправить?
Используя следующий код pdoMenu не работает пункты 3.1…

            [[pdoMenu?
          	&level=`3`
          	&parents=`0`
          	&outerClass = `hed-menu nav navbar-collapse collapse nav-pills nav-justified`
          	
          	&tplOuter=`@INLINE <ul [[+classes]]>[[+wrapper]]</ul>`
          	&tpl=`@INLINE <li><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
          	&tplParentRow=`@INLINE <li class="dropdown" ><a href="[[+link]]" [[+attributes]] data-submenu="" data-toggle="dropdown" tabindex="0" aria-expanded="false" >[[+menutitle]]<span class="arw"></span></a>[[+wrapper]]</li>`
          	&tplInner=`@INLINE <ul class="dropdown-menu">[[+wrapper]]</ul>`
            ]]

Сергей Шлоков 23 октября 2017 # ↑ ↓ 0

Здравствуйте!
Насколько я понял, Вы используете css фреймворк. Поэтому для начала попробуйте разобраться с работой дропдауна. В сети много примеров построения многоуровневого меню для любых фреймворков.
В вашей верстке для пункта 3 указаны атрибуты, я для пункта 3.1 нет.

Владимир 11 марта 2018 # ↓ +1

Спасибо!

Роман 09 мая 2018 # ↓ 0

Здравствуйте, уважаемые знатоки Modx и pdoMenu!!! Я только начинаю разбираться с этой системой и прошу помощи у вас! Может ли кто нибудь привести пример меню хотя бы с тремя уровнями вложенности? Или это не реально сделать? Я честно потратил три дня на поиски, но не нашёл ни одного примера с тремя уровнями, везде два и на этом всё. А дальше разглагольствования на тему не ограниченной вложенности и сплошной копипаст одних и тех же статей. Для примера, приведу верстку:

<div class="sidebar-content">
        <div class="sidebar-menu">
            <h4 class="sidebar-menu__title">Заголовок1</h4>
            <ul class="sidebar-menu__list">
                <li class="sidebar-menu__item">
                    <i class="sidebar-menu__chevron sidebar-menu__chevron--open"></i>
                    <a href="#" class="sidebar-menu__link sidebar-menu__link--selected">Пункт1</a>
                    <ul class="sidebar-menu__nested-list sidebar-menu__nested-list--open">
                        <li class="sidebar-menu__item sidebar-menu__item--nested">
                            <a href="#" class="sidebar-menu__link sidebar-menu__link--nested">Пункт1.1</a>
                        </li>
                        <li class="sidebar-menu__item sidebar-menu__item--nested">
                            <a href="#" class="sidebar-menu__link sidebar-menu__link--nested">Пункт1.2</a>
                        </li>
                        <li class="sidebar-menu__item sidebar-menu__item--nested">
                            <a href="#" class="sidebar-menu__link sidebar-menu__link--nested">Пункт1.3</a>
                        </li>
                    </ul>
                </li>
                <li class="sidebar-menu__item"><i class="sidebar-menu__chevron"></i><a href="#" class="sidebar-menu__link">Пункт2</a></li>
                <li class="sidebar-menu__item"><i class="sidebar-menu__chevron"></i><a href="#" class="sidebar-menu__link">Пункт3</a></li>
            </ul>
        </div>
        <div class="sidebar-menu">
            <h4 class="sidebar-menu__title">Заголовок2</h4>
            <ul class="sidebar-menu__list">
                <li class="sidebar-menu__item"><i class="sidebar-menu__chevron"></i><a href="#" class="sidebar-menu__link">Пункт1</a></li>
                <li class="sidebar-menu__item"><i class="sidebar-menu__chevron"></i><a href="#" class="sidebar-menu__link">Пункт2</a></li>
                <li class="sidebar-menu__item"><i class="sidebar-menu__chevron"></i><a href="#" class="sidebar-menu__link">Пункт3</a></li>
                <li class="sidebar-menu__item"><i class="sidebar-menu__chevron"></i><a href="#" class="sidebar-menu__link">Пункт4</a></li>
            </ul>
        </div>
    </div>

И то что я смог написать:

    <div class="sidebar-content">
        [[pdoMenu?
        &parents=`6`
        &level=`0`
        &tplOuter = `@INLINE <div class="sidebar-content">[[+wrapper]]</div>`
        &tpl = `@INLINE
        <div class="sidebar-menu">[[+wrapper]]</div>
        `
        &tplInner = `@INLINE
        <h4 class="sidebar-menu__title">[[+menutitle]]</h4>
        <ul class="sidebar-menu__list">[[+wrapper]]</ul>
        `
        &tplInnerRow = `@INLINE
        <li class="sidebar-menu__item">
            <i class="sidebar-menu__chevron"></i>
            <a href="[[+link]]" class="sidebar-menu__link">[[+menutitle]]</a>
        </li>
        `
        &tplInnerHere = `@INLINE
        <li class="sidebar-menu__item">
            <i class="sidebar-menu__chevron sidebar-menu__chevron--open"></i>
            <a href="[[+link]]" class="sidebar-menu__link sidebar-menu__link--selected">[[+menutitle]]</a>
        </li>
        `
        ]]
    </div>

То есть до второго уровня я дошёл без проблем, но как вывести третий уровень, ума не приложу…
Прошу помогите или напишите пример реализации такой вложенности меню!!! За ранее спасибо!!!

Сергей Шлоков 09 мая 2018 # ↑ ↓ 0

Ну что ж, давайте попробуем разобраться.
1. Вы 2 раза оборачиваете меню в тег div class=«sidebar-content». Или уберите из разметки или из шаблона tplOuter. Я бы посоветовал второй вариант.
2. Если Вы не хотите, чтобы на каждом уровне выводился заголовок h4, то перенесите его из шаблона tplInner в шаблон tpl.
3. Касательно третьего и остальных уровней меню. Проблема в невнимательности. Давайте обратимся к описанию параметра tpl:

Плейсхолдер [[+wrapper]] необходим для вывода следующего уровня меню. Если его убрать, то дочерние ресурсы показываться не будут, т.е. будет отображён только первый уровень меню.
В шаблоне tpl он у Вас есть, а в шаблоне tplInnerRow нет. Поэтому следующий уровень и не отображается.

Это то, что бросается в глаза с первого взгляда.
1. Роман 09 мая 2018 # ↑ ↓ 0
  
  Сергей, огромное спасибо за оперативный ответ!!! Но не всё так просто, как хотелось бы… Есть ли какая то возможность написать вам лично? С тем, что бы не разводить тут полемику и возможные глупые вопросы с моей стороны. С уважением! Роман.
2. Роман 09 мая 2018 # ↑ ↓ 0
  
  Еще раз огромное спасибо вам, Сергей!!! Сделал исправления и третий уровень появился! Но остался не решённый вопрос: у третьего уровня другие стили оформления(или другой шаблон), каким образом мне задать эти стили или изменить шаблон для третьего уровня? За ранее спасибо за ответ!!!
  С уважением! Роман.
  1. Роман 09 мая 2018 # ↑ ↓ 0
    <div class="sidebar-content"> [[pdoMenu? &parents=`6` &level=`0` &tplOuter = `@INLINE [[+wrapper]]` &tpl = `@INLINE <div class="sidebar-menu"> <h4 class="sidebar-menu__title">[[+menutitle]]</h4> [[+wrapper]] </div> ` &tplInner = `@INLINE <ul class="sidebar-menu__list">[[+wrapper]]</ul> ` &tplInnerRow = `@INLINE <li class="sidebar-menu__item"> <i class="sidebar-menu__chevron"></i> <a href="[[+link]]" class="sidebar-menu__link">[[+menutitle]]</a> </li> ` &tplInnerHere = `@INLINE <li class="sidebar-menu__item"> <i class="sidebar-menu__chevron sidebar-menu__chevron--open"></i> <a href="[[+link]]" class="sidebar-menu__link sidebar-menu__link--selected">[[+menutitle]]</a> [[+wrapper]] </li> ` ]] </div>

Роман 11 мая 2018 # ↓ 0

Здравствуйте, уважаемые знатоки Modx и pdoMenu!!! Из того, что ни каких ответов и комментариев больше не последовал, я прихожу к выводу о том, что мою задачу при помощи pdoMenu решить не возможно… И вся заявленная гибкость этого инструмента выглядит сомнительной.
Подскажите, есть ли в Modx другой способ реализации такого меню, что бы у каждого уровня вложенности можно было задавать свои стили(классы) как обёрткам(ul), так и пунктам меню? За ранее спасибо за ответ!
Чернов 11 мая 2018 # ↓ 0
Добрый день))
Может вы сможете мне объяснить с PDOMenu

у меня есть код верстки:
```
<ul class="nav navbar-nav">
      <li class="dropdown dropdown-large">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
				<ul class="dropdown-menu dropdown-menu-large row">
					<li class="col-sm-3">
						<ul>
							<li class="dropdown-header">Sword of Truths</li>
							<li><a href="#">Example</a></li>
							<li><a href="#">Example</a></li>
							<li><a href="#">Example</a></li>
							<li><a href="#">Example</a></li>
							<li><a href="#">Example</a></li>
							<li><a href="#">Example</a></li>
					
						</ul>
					</li>
				</ul>
			 </li>	
				
		</li>
	</ul>
```
и вызов в PDOMenu
```
[[!pdoMenu?
	  &parents=`0`
	  &level=`3`
	  &tplOuter=`@INLINE <ul class="nav navbar-nav">[[+wrapper]]</ul>`
	  &tplInner=`@INLINE <ul class="dropdown-menu dropdown-menu-large row">[[+wrapper]]</ul>`
	  &tpl=`@INLINE <li class="dropdown dropdown-large"><a href="[[+link]]" class="dropdown-toggle" data-toggle="dropdown">[[+menutitle]] <b class="caret"></b></a>[[+wrapper]]</li>`
	  &tplInnerRow=`@INLINE <li class="col-sm-3">
	                    <ul>
							<li class="dropdown-header"><a href="[[+link]]">[[+menutitle]]</a></li>[[+wrapper]]
						</ul>`
	 
      ]]
```
вот ссылка где это оформлено: 7pobed.tmweb. ru

Смысл в том что не могу вывести треий уровень меню… тончее могу но унего наследуеться класс родителя и он становиться как верхний уровень выпадающим а мне необходимо чтобы третий уровень меню был расположен под вторым уровенм меню просто списком.
1. Сергей Шлоков 11 мая 2018 # ↑ ↓ 0
  
  Добрый, добрый!
  Единственное, что я могу посоветовать — используйте феном. С его помощью данная задача решается очень легко.
  
  Подсказка: в tplInner и tplInnerRow проверяйте переменную $level. Инлайн чанк придётся заменить на обычный или файловый, иначе будет сложновато читаться.
  1. Чернов 11 мая 2018 # ↑ ↓ 0
    
    Спасибо)) ПОдсказка хорошая, натолкнули на идею…
    1. Сергей Шлоков 11 мая 2018 # ↑ ↓ 0
      
      Вот, чтобы идея не пропала ))
      1. Чернов 11 мая 2018 # ↑ ↓ 0
        
        ссылка нужная…
        я решил с помощью fenom по вашему совету, и у меня решение чуток отличаеться от того что в ссылке)
        
        Но в целом работает теперь все как надо.
        Достаточно было написать всего лишь два условия на Fenom и все оказалось довольно просто
        
        Сергей Шлоков 11 мая 2018 # ↑ ↓ 0
        
        Как-нибудь настроюсь и напишу статью про то, как с помощью Fenom использовать всего один чанк вместо 10. Пока не могу никак себя мотивировать.
        
        Роман 12 мая 2018 # ↑ ↓ 0
        
        Здравствуйте! А не могли бы вы выложить код своего решения? У меня такая же задача с меню, но я начинающий в этом деле и пока не могу сам решить такого рода задачи.
        
        Чернов 14 мая 2018 # ↑ ↓ 0
        
        вот вызов PdoTools
        
        [[!pdoMenu? &parents=`0` &level=`3` &levelClass=`level` &tplOuter=`@INLINE <ul class="nav navbar-nav">[[+wrapper]]</ul>` &tplInner=`tplInnerMenu` &tplInnerRow=`tplInnerRowMenu` &tpl=`@INLINE <li class="dropdown dropdown-large"><a href="[[+link]]" class="dropdown-toggle" data-toggle="dropdown">[[+menutitle]] <b class="caret"></b></a>[[+wrapper]]</li>` ]]
        и 2 чанка
        tplInnerMenu
        
        {if $level!="2"} <ul class="dropdown-menu dropdown-menu-large row">[[+wrapper]]</ul> {else} [[+wrapper]] {/if}
        и чанк
        tplInnerRowMenu
        
        {if $level=="2"} <li class="col-sm-3" style="border-right: 1px solid #e1e1e1;"> <ul class="list_nav_menu"> <li class="dropdown-header2"><a href="[[+link]]" class="header_menu_top">[[+menutitle]]</a></li> [[+wrapper]] </ul> </li> {else} <li> <ul> <li class="dropdown-header2"><a href="[[+link]]">[[+menutitle]]</a></li> <li>[[+wrapper]]</li> </ul> </li> {/if}
        
        Роман 14 мая 2018 # ↑ ↓ 0
        
        Здравствуйте товарищ Чернов(к сожалению не знаю вашего имени)!
        Скажите, а чанки «tplInnerRowMenu» и «tplInnerRowMenu» это Modx чанки или можно файловые сделать и обратится к ним через команду
        
        &tplInner=`@FILE tplInnerMenu` &tplInnerRow=`@FILE tplInnerRowMenu`
        ?
        И еще мне непонятно, как создаётся и переменная "$level"? Или она автоматически генерируется команлой
        
        &levelClass=`level`
        ?
        За ранее спасибо за ответ!
        С уважением!
        Роман.
        
        Чернов 14 мая 2018 # ↑ ↓ 0
        
        (к сожалению не знаю вашего имени)! — Николай)))
        можно сделать и файловыми — это как вам удобнее.
        
        про переменную где то вычитал, поэтому как она формируеться не могу сказать к сожалению
        
        Роман 14 мая 2018 # ↑ ↓ 0
        
        Николай, огромное спасибо за помощ!!!

Fuad 12 мая 2018 # ↓ 0

Приветствую Всех!
Нужна помошь.

<li><a href="about.html">О нас</a></li>
  <li><a href="teachers.html">Наши педагоги</a></li>
  <li><a href="">Вакансии</a></li>
  <li><a href="rules.html">Наши правила</a></li>
  <li><a href="feedback.html">Отзывы</a></li>
</ul>       
        <li><a href="classes.html">Занятия</a></li>
        <li><a href="actors.html">Актерское мастерство</a></li>
        <li><a href="english.html">Английский язык</a></li>
        <li><a href="art.html">ИЗО</a></li>
        <li><a href="chess.html">Шахматы</a></li>
  	<li><a href="ceramic.html">Керамика</a></li>
        <li><a href="menar.html">МЕНАР</a></li>
        <li><a href="schedule.html">Расписание</a></li>
        <li><a href="prices.html">Цены</a></li>
        <li><a href="galery.html">Фото и видео</a></li>
        <li><a href="contacts.html">Контакты</a></li>
        <li><a class="modal-trigger" href="#modal1">Online-запись</a></li>
        <li><a href="http://new.menar.online/rus/">Online-платформа</a></li>

Прописываю все в pdomenu

[[pdoMenu? 
 &level=`1` 
 &parents=`0`
 &outerClass=`nav navbar-nav`
 &tplOuter=`@INLINE <ul [[+classes]] id="menu">[[+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>`
]]

Что я не правильно делаю
не получаеться выпадающий список

Роман 12 мая 2018 # ↑ ↓ +1

У вас html написан неправильно, если вы хотите реализовать вложенный список, тогда пишите его внутри общего контейнера(ul), а то что у вас в примере thml кода написано, это вообще нарушение всех базовых правил разметки. Разметка должна выглядеть примерно так:

<ul>
  <li><a href="about.html">О нас</a></li>
  <li><a href="teachers.html">Наши педагоги</a></li>
  <li><a href="">Вакансии</a></li>
  <li><a href="rules.html">Наши правила</a></li>
  <li><a href="feedback.html">Отзывы</a>
    <ul>
        <li><a href="classes.html">Занятия</a></li>
        <li><a href="actors.html">Актерское мастерство</a></li>
        <li><a href="english.html">Английский язык</a></li>
        <li><a href="art.html">ИЗО</a></li>
        <li><a href="chess.html">Шахматы</a></li>
  	<li><a href="ceramic.html">Керамика</a></li>
        <li><a href="menar.html">МЕНАР</a></li>
        <li><a href="schedule.html">Расписание</a></li>
        <li><a href="prices.html">Цены</a></li>
        <li><a href="galery.html">Фото и видео</a></li>
        <li><a href="contacts.html">Контакты</a></li>
        <li><a class="modal-trigger" href="#modal1">Online-запись</a></li>
        <li><a href="http://new.menar.online/rus/">Online-платформа</a></li>
    </ul>
  </li>
</ul>

Jorik 26 мая 2018 # ↓ +1

Статья очень полезная!
Сергей 14 сентября 2018 # ↓ 0
Доброго времени суток!
Подскажите пожалуйста как реализовать данное меню при помощи pdomenu:
- Меню
- Главная
- Продукция
- Услуги
- Фотогалерея
- О компании
- Контакты
- ГК Фенсер
Я понимаю что меню совсем простое но у меня затруднение с выводом первой и последней строки.
Прошу помощи у знатоков так как только начал работать с Modx

Сергей 14 сентября 2018 # ↓ 0

<nav>
  <ul class="box-primary-nav">
	<li class="box-label">Меню</li>
	
	<li><a href="/">Главная</a> <i class="ion-ios-circle-filled color"></i></li>
	<li><a href="produktchiya.php">Продукция</a></li>
	<li><a href="services.php">Услуги</a></li>
	<li><a href="fotogalereya.php">Фотогалерея</a></li>
	<li><a href="about.php">О компании</a></li>
	<li><a href="contact.php">Контакты</a></li>
	
	<li class="box-label">ГК Фенсер</li>
  </ul>
</nav>

Сергей Шлоков 14 сентября 2018 # ↑ ↓ 0

Ну и вставьте вызов вместо этих средних li-шек. Только tplOuter обнулите.

Сергей 14 сентября 2018 # ↑ ↓ 0

Получилось вот так

<nav>
  <ul class="box-primary-nav">
	<li class="box-label">Меню</li>
	
	[[pdoMenu? &parents='0' &tplOuter=@INLINE <li>[[+wrapper]]</li> &outerClass=box-primary-nav]]
	
	<li class="box-label">ГК Фенсер</li>
  </ul>
</nav>

Единственный вопрос как добиться пометки активного пункта

<li><a href="/">Главная</a> <i class="ion-ios-circle-filled color"></i></li>

Сергей Шлоков 14 сентября 2018 # ↑ ↓ 0

<nav>
  <ul class="box-primary-nav">
	<li class="box-label">Меню</li>
	
	[[pdoMenu? 
		&parents=`0` 
		&tplOuter=`@INLINE [[+wrapper]]`
	]]
	
	<li class="box-label">ГК Фенсер</li>
  </ul>
</nav>

За активный пункт отвечает параметр tplHere.

Сергей 14 сентября 2018 # ↑ ↓ 0

Вот как то так на выходе у меня получилось:

<nav>
  <ul class="box-primary-nav">
	<li class="box-label">Меню</li>
	
	[[pdoMenu? 
		&parents=`0` 
		&tplOuter=`@INLINE [[+wrapper]]`
		&tplHere=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a> <i class="ion-ios-circle-filled color"></i>[[+wrapper]]</li>`
	]]
	
	<li class="box-label">ГК Фенсер</li>
  </ul>
</nav>

Огромное вам спасибо за помощь!!!

Сергей Шлоков 14 сентября 2018 # ↑ ↓ 0

На здоровье!

sergeymaverick 20 сентября 2018 # ↓ +1

Добрый вечер, подскажите как сделать правильно через pdoMenu?

<ul class="submenu">
           <i>Под пункт 1</i>
           <li>
           	<a href="#">Под меню 1</a>
           	<a href="#">Под меню 1</a>
           	<a href="#">Под меню 1</a>
           </li>
           <i>Под пункт 2</i>
           <li>
           	<a href="#">Под меню 2</a>
           	<a href="#">Под меню 2</a>
           	<a href="#">Под меню 2</a>
           </li>
</ul>

РОМАН 15 октября 2018 # ↓ 0

:)

Igor 01 июля 2019 # ↓ 0

Подскажите как сделать такое меню на pdomenu

<ul>
	<li class="level0 parent col1 all-product hd-pd">
		<a href="#">
			<span>All Products</span>
			<i class="fa fa-chevron-down"></i>
		</a>
		<ul class="level0">
			<li class="level1">
				<ul class="level1">
					<li class="level2">
						<a href="#" title="">Business Card</a>
					</li>
				</ul>
			</li>
			<li class="level1">
				
				<ul class="level1">
					<li class="level2">
						<a href="#" title="">Calendar</a>
						<ul class="level2">						
							<li>
								<a href="#" title="">Marketing Materials</a>
							</li>
							<li><img src="images/banner/menu/menu-cate-calendar.png" alt=""></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="level0 hd-pd">
		<a href="#" title="">Marketing</a>
	</li>
	<li class="level0 parent col1 hd-pd">
		<a href="#" title="">
			<span>Business Cards</span>
			<i class="fa fa-chevron-down"></i>
		</a>
		<ul class="level0">
			<li class="level1 nav-1-1 first item">
				<a href="#" title="">Premium Business Cards</a>
			</li>
			<li class="level1 nav-1-9 last item">
				<a href="#" title="">Mommy Cards</a>
			</li>
		</ul>
	</li>
</ul>

Алексей 15 апреля 2020 # ↓ 0

Товарищи подскажите пожалуйста где я ошибаюсь?

<ul class="navbar-nav ml-auto">
<!-- menu item -->
    <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
    <!-- menu item -->
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="services-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a><div class="dropdown-menu" aria-labelledby="services-dropdown">
          <a class="dropdown-item" href="services.html">Services Style 1</a>
          <a class="dropdown-item" href="services2.html">Services Style 2</a>
          <a class="dropdown-item" href="services-single.html">Services Single</a>
       </div></li>
    <!-- menu item -->
    <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" id="about-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       About
       </a>
       <div class="dropdown-menu" aria-labelledby="about-dropdown">
          <a class="dropdown-item" href="about.html">About Style 1</a>
          <a class="dropdown-item" href="about2.html">About Style 2</a>
       </div>
    </li>
    <!-- menu item -->
    <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" id="adopt-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       Adopt
       </a>
       <div class="dropdown-menu" aria-labelledby="adopt-dropdown">
          <a class="dropdown-item" href="adoption.html">Adoption Gallery</a>
          <a class="dropdown-item" href="adoption-single.html">Adoption Single Page</a>
       </div>
    </li>
    <!-- menu item -->
    <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" id="gallery-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       Gallery
       </a>
       <div class="dropdown-menu" aria-labelledby="gallery-dropdown">
          <a class="dropdown-item" href="gallery.html">Gallery Style 1</a>
          <a class="dropdown-item" href="gallery2.html">Gallery Style 2</a>
       </div>
    </li>
    <!-- menu item -->
    <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" id="contact-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       Contact
       </a>
       <div class="dropdown-menu" aria-labelledby="contact-dropdown">
          <a class="dropdown-item" href="contact.html">Contact Style 1</a>
          <a class="dropdown-item" href="contact2.html">Contact Style 2</a>
       </div>
    </li>
    <!-- menu item -->
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="others-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Other pages</a>
       <div class="dropdown-menu" aria-labelledby="others-dropdown">
          <a class="dropdown-item" href="team.html">Our Team</a>
          <a class="dropdown-item" href="blog.html">Blog Home</a>
          <a class="dropdown-item" href="blog-single.html">Blog Single</a>
          <a class="dropdown-item" href="elements.html">Elements Page</a>
          <a class="dropdown-item" href="404.html">404 Page</a>
       </div>
    </li>
</ul>

Это в html шаблоне

[[!pdoMenu?
	&level=`2`
	&parents=`0`
	&tplOuter=`@INLINE <ul class="navbar-nav ml-auto">[[+wrapper]]</ul>`
    &tplParentRow=`@INLINE <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="[[+link]]">[[+menutitle]]</a>[[+wrapper]]</li>`
	&tplParentRowActive=`@INLINE <li class="nav-item dropdown active"><a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="[[+link]]">[[+menutitle]]</a>[[+wrapper]]</li>`
	&tplInner=`@INLINE <div class="dropdown-menu" aria-labelledby="others-dropdown">[[+wrapper]]</div>`
	&tplInnerRow=`@INLINE <a class="dropdown-item" href="[[+link]]">[[+menutitle]]</a>`
	&tpl=`@INLINE <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="[[+link]]">[[+menutitle]]</a>[[+wrapper]]</li>`
]]

Вы должны авторизоваться, чтобы оставлять комментарии.