Помогите сделать меню в PdoMenu

Добрый день. Возникла проблема с организацией меню. Раньше работал с Wayfinder, а теперь решил сделать на Bootstrap и PdoTools, но никак не могу въехать как организовать меню. Как известно, Bootstrap 3 не позволяет сделать многоуровневое меню. Нашёл где-то костыль, плюс сторонние скрипты для hover эффекта на touch девайсах. Меню выглядит как-то так:

<!-- Navbar -->
<div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="nav_grinlib_building hidden-xs hidden-sm" href="#"><img src="grinlib_building.jpg" alt="" title="" /></a>
    </div>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right nav_search">
        <form class="navbar-form navbar-left" action="#" method="post">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Поиск по сайту">
              <span class="input-group-addon"><i class="fa fa-search"></i></span>
            </div>
        </form>
    </ul>
      <!-- Left nav -->
        <ul class="nav navbar-nav">
            <li><a href="#" class="disabled">Submenu 1 <span class="caret"></span></a>
                <ul class="dropdown-menu">                    
                    <li><a href="#" class="disabled">Submenu 1.1 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Article 1</a></li>
                            <li><a href="#">Article 2</a></li>
                            <li><a href="#">Article 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="disabled">Submenu 1.2 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Article 1</a></li>
                            <li><a href="#">Article 2</a></li>
                            <li><a href="#">Article 3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#" class="disabled">Submenu 2 <span class="caret"></span></a>
                <ul class="dropdown-menu">                    
                    <li><a href="#" class="disabled">Submenu 2.1 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Article 1</a></li>
                            <li><a href="#">Article 2</a></li>
                            <li><a href="#">Article 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="disabled">Submenu 2.2 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Article 1</a></li>
                            <li><a href="#">Article 2</a></li>
                            <li><a href="#">Article 3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#" class="disabled">Submenu 3 <span class="caret"></span></a>
                <ul class="dropdown-menu">                    
                    <li><a href="#">Article 1</a></li>
                    <li><a href="#">Article 2</a></li>
                    <li><a href="#">Article 3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div><!--/.nav-collapse -->
Тему на форуме () читал. Мануал по PdoTools тоже.

В общем, буду очень благодарен за пинок в нужном направлении.
Василий Одинцов
15 сентября 2016, 11:20
modx.pro
10 130
0

Комментарии: 13

Volodymyr
16 сентября 2016, 00:16
0
У меня вот так сделано:

[[pdoMenu?
  &parents=`1,2,10`
  &level=`3`
  &tplOuter=`@INLINE  [[+wrapper]]`

  &tpl=`@INLINE <a [[+classes]] href="[[+link]]">[[+menutitle]]</a>`
  &hereClass=`green active`
  &rowClass=`item`
  
    &tplParentRow=`kr2.tpl.ParentRow`
    &tplParentRowHere=`@INLINE <a href="[[+link]]" [[+classes]]>[[+menutitle]] </a>`
    &tplInner=`@INLINE <div class="menu"> [[+wrapper]] </div>`
    &tplInnerRow=`@INLINE <a href="[[+link]]" [[+classes]]>[[+menutitle]]</a>`
    &tplParentRowActive=`kr2.tpl.ParentRow.active`
    
  &tplInnerHere=`@INLINE <a href="[[+link]]" [[+classes]]>[[+menutitle]] </a>`

  &parentClass=``
    &levelClass=``
  &innerClass=``
  &firstClass=``
  &lastClass=``
  &webLinkClass=``
 ]]
kr2.tpl.ParentRow:

<div class="ui dropdown item">
  <div class="text">
[[+menutitle]]
  <i class="dropdown icon"></i>
</div>
   [[+wrapper]]
</div>
kr2.tpl.ParentRow.active:
<div class="ui dropdown green item">
<div class="text"> 
<a href="" class="active green item">  [[+menutitle]]</a>
</div> 
  <i class="dropdown icon"></i>
    [[+wrapper]]
</div>
Шаблон права не Bootstrap a Semantic, но думаю на Bootstrap будет даже проще.
    Дмитрий Середюк
    16 сентября 2016, 03:12
    +1
    [[pdoMenu?
    &startId=`0`
    &level=`2`
    &tplParentRow=`@INLINE
    <li class="[[+classnames]] dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" [[+attributes]]>[[+menutitle]]
    <b class="caret"></b></a><ul class="dropdown-menu">[[+wrapper]]</ul>
    </li>`
    &tplOuter=`@INLINE [[+wrapper]]`
    ]]

    взято отсюда minishop2.com, структура схожа с ваше, а точнее оригинал D
      man
      man
      16 сентября 2016, 14:38
      0
      на бутстрапе с клик/ховер
      [[pdoMenu? 
      	&level=`2` 
      	&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>`
      ]]
      или
      [[pdoMenu?  
      	&level=`2` 
      	&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]] dropdown>
      		<a class="dropdown-toggle"[[+attributes]] data-hover="dropdown" data-delay="100" data-close-others="false" href="[[+link]]" [[+attributes]]>
      			[[+menutitle]]<span class="caret"></span>
      		</a>
      		[[+wrapper]]
      	</li>`
      ]]
        Василий Одинцов
        19 сентября 2016, 09:40
        0
        Большое всем спасибо — спасли. Способ, указанный Дмитрием Середюком работает как надо.
          Николай
          15 марта 2017, 12:57
          0
          А если необходимо добавить третий уровень?
          Сделал, но не отображается именно третий уровень, вместо него просто пустое поле
            Антон
            Антон
            16 марта 2017, 08:20
            0
            &level=`3`
            Николай
            15 марта 2017, 13:14
            0
            [[pdoMenu? 
                &level=`2` 
                &parents=`0`
                &outerClass=`nav navbar-nav`
                &tplOuter=`@INLINE <ul [[+classes]]>[[+wrapper]]</ul>` 
                &tplInner=`@INLINE <ul class="dropdown-menu"><li class="dropdown-submenu"><a href=[[+link]]>[[+menutitle]]</a>
                            <ul class="dropdown-menu">[[+wrapper]]</ul></li></ul>`
                &tplParentRow=`@INLINE <li [[+classes]]>
                                            <a class="dropdown-toggle" data-toggle="dropdown" href="[[+link]]" [[+attributes]]>
                                                [[+menutitle]]<span class="caret"></span>
                                            </a>
                                            [[+wrapper]]
                                        </li>`
            ]]
            Сделал так, но второй уровень меню выводится вместо третьего, а на месте второго уровня дублируется название первого(
              TonySq
              20 мая 2018, 09:00
              0
              Первый раз использую pdoTool, да и в общем modx только начинаю осваивать.
              Поиск в интернете Bootstrap 4 + pdoMenu ничего толкового не дал, кроме пары способов с ужасными костылями. Решение для Bootstrap 3 не подходит в силу изменения верстки. Решения с заменой DIV на UL меня лично не устраивают, если разработчики решили сделать DIV, значит так лучше)
              Почитал, разобрался, сделал. Для тех кому может понадобиться(не забудьте удалить комментарии из кода):
              [[pdoMenu?
              	&level=`2`
              	&parents=`0`
              	&outerClass=`navbar-nav` // Устанавливаем класс контейнера меню (<ul class="navbar-nav"></ul>)
              	&rowClass=`nav-item` // Устанавливаем класс элемента меню (<li class="nav-item"></li>)
                      &tpl=`@INLINE <li[[+classes]]><a href="[[+link]]" class="nav-link">[[+menutitle]]</a></li>` // Выводим элемент меню с ссылкой (<li class="nav-item"><a href="#" class="nav-link">Link 1</a></li>)
              	&tplParentRow=`@INLINE <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">[[+menutitle]]</a>[[+wrapper]]</li>` // Выводим родительский пункт меню, ссылку и иконку (<li class="nav-item dropdown"></li>)
              	&tplInner=`@INLINE <div class="dropdown-menu">[[+wrapper]]</div>` // Выводим div контейнер для выпадающего меню (<div class="dropdown-menu" aria-labelledby="navbarDropdown">)
                      &tplInnerRow=`@INLINE <a href="[[+link]]" class="dropdown-item">[[+menutitle]]</a>` // Выводим элементы выпадающего меню в контейнер div  (<a class="dropdown-item" href="#">Action</a>)
              ]]
              Все отлично работает на 2 уровня, кусок кода navbar на котором тестировалось:
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                              <ul class="navbar-nav">
                                  <li class="nav-item">
                                      <a href="#" class="nav-link">Link 1</a>
                                  </li>
                                  <li class="nav-item">
                                      <a href="#" class="nav-link">Link 2</a>
                                  </li>
                                  <li class="nav-item">
                                      <a href="#" class="nav-link">Link 3</a>
                                  </li>
                                  <li class="nav-item dropdown">
                                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                                      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                          <a class="dropdown-item" href="#">Action</a>
                                          <a class="dropdown-item" href="#">Another action</a>
                                          <div class="dropdown-divider"></div>
                                          <a class="dropdown-item" href="#">Something else here</a>
                                      </div>
                                  </li>
                              </ul>
                          </div>
                zank
                23 июня 2018, 12:30
                0
                Спасибо братюня!
                Твой единственный полностью рабочий способ (главное комментарии в коде убрать -) ), у всех остальных способов костыли ппц UL с DIV путают, в результате стили бутсрапа не подцепляются. А есть страшенные велосипеды с феномом еще.
                Вот тоже велосипед на феноме, и он даже работает как нужно, но если перейти на ссылку контейнер dropdown-menu, то меню ломается.

                [[!pdoMenu?
                        &parents=`0`
                        &level=`2`
                        &firstClass=``
                        &lastClass=``
                        &outerClass=`navbar-nav`
                        &parentClass=`dropdown`
                        &rowClass=`nav-item`
                        &tpl=`@INLINE <li{$classes}><a class="nav-link" href="{$link}">{$menutitle}</a>{$wrapper}</li>`
                        &tplInnerRow=`@INLINE <a class="dropdown-item" href="{$link}">{$menutitle}</a>{$wrapper}`
                        &tplInner=`@INLINE {$wrapper}`
                        &tplParentRow=`@INLINE <li{$classes}><a class="nav-link dropdown-toggle" href="{$link}" id="navbarDropdownMenuLink-{$id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{$menutitle}</a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-{$id}">{$wrapper}</div></li>`
                        &tplHere=`@INLINE <li{$classes}><a class="nav-link" href="{$link}">{$menutitle} <span class="sr-only">(current)</span></a>{$wrapper}</li>`
                        &tplInnerHere=`@INLINE <a class="dropdown-item active" href="{$link}">{$menutitle}</a>{$wrapper}`
                        ]]
              игорь моргунов
              06 сентября 2018, 12:34
              0
              Помогите сделать меню. 2 выпадающих списка и у них разный дизайн
              <nav class="header_item_bottom flexc">
              	<ul class="topmenu">
              		<li><a href="#" class="submenu-link">О Компании</a>
              			<ul class="submenu">
              				<li class="li_wrap flexc">
              					<div>
              						<img src="assets/templates/rt-logistic/img/menu_ikon2.png" alt="">
              					</div>
              					<a href="services.html">Оптима</a>
              				</li>
              				<li class="li_wrap flexc">
              					<div>
              						<img src="assets/templates/rt-logistic/img/menu_ikon3.png" alt="">
              					</div>
              					<a href="services_econom.html">Эконом</a>
              				</li>
              				<li class="li_wrap flexc">
              					<div>
              						<img src="assets/templates/rt-logistic/img/menu_ikon3.png" alt="">
              					</div>
              					<a href="dop_services.html">Дополнительные услуги</a>
              				</li>
              				<li class="li_wrap flexc">
              					<div>
              						<img src="assets/templates/rt-logistic/img/menu_ikon3.png" alt="">
              					</div>
              					<a href="calc.html">Калькулятор</a>
              				</li>
              			</ul>
              		</li>
              		<li><a href="#" class="submenu-link">Наши услуги</a>
              			<ul class="submenu new_sub">
              				<div class="tipe_wrap flex">
              					<div class="tipe">
              						<div class="tipe_title">
              							Типы перевозок
              						</div>
              						<div class="tipe_link">
              							<a href="services.html">Оптима </a>
              						</div>
              						<div class="tipe_link">
              							<a href="services_econom.html">Эконом </a>
              						</div>
              					</div>
              					<div class="dop_usl">
              						<div class="tipe_title tt_new">
              							Дополнительные услуги
              						</div>
              						<div class="dop_usl_wrap flex">
              							<div class="dop-usl_wrap_first">
              								<div class="tipe_link">
              									<a href="">Забор груза </a>
              								</div>
              								<div class="tipe_link">
              									<a href="">Доставка груза</a>
              								</div>
              								<div class="tipe_link">
              									<a href="">Погрузо-разгрузочные работы</a>
              								</div>
              								<div class="tipe_link">
              									<a href="">Перевозка сопроводительных документов</a>
              								</div>
              								<div class="tipe_link">
              									<a href="">Упаковка</a>
              								</div>
              								<div class="tipe_link">
              									<a href="">Страхование</a>
              								</div>
              							</div>
              							<div class="dop-usl_wrap_second">
              								<div class="tipe_link">
              									<a href="">Возврат документов</a>
              								</div>
              								<div class="tipe_link">
              									<a href="">Внутритарный пересчёт</a>
              								</div>
              								<div class="tipe_link">
              									<a href="">Временное хранение</a>
              								</div>
              								<div class="tipe_link">
              									<a href="">SMS информирование</a>
              								</div>
              							</div>
              						</div>
              					</div>
              				</div>
              			</ul>
              		</li>
              	<li><a href="new.html">Информация</a></li>
              	<li><a href="services.html">Cервис</a></li>
              	<li><a href="ofise.html">Контакты</a></li>
              	<li><a class="persone_room" href="#">
              		<div class="item_bottom_room flexc">
              			<div class="bottom_room_ikon">
              				<img src="assets/templates/rt-logistic/img/room_ikon.png" alt="">
              			</div>
              			<div class="bottom_room_text">
              				Личный кабинет
              			</div>
              		</div>
              		</a>
              	</li>
              </ul>
              </nav>
              Меню то что получилось
              [[pdoMenu?
              &startId=`0`
              &parents=`0`
              &level=`2`
              &levelClass=`level`
              &tplOuter=`@INLINE <ul class="topmenu">[[+wrapper]]</ul>`
              &tpl=`@INLINE <li[[+classes]]><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
              &tplParentRow=`@INLINE
                   <li class="[[+classnames]] dropdown">
                   <a href="#" class="submenu-link" data-toggle="dropdown" [[+attributes]]>[[+menutitle]]
                   <b class="caret"></b></a><ul class="submenu">[[+wrapper]]</ul>
                   </li>`
               &tplInner=`@INLINE 
              	<li class="li_wrap flexc">
              		<div>
              			<img src="assets/templates/rt-logistic/img/menu_ikon2.png" alt="">
              		</div>
              		<a href="[[+link]]">[[+menutitle]]</a>
              	</li>`
              ]]
              Как должно быть
              yadi.sk/i/KxJTUlwza-spiQ
              yadi.sk/i/j-REqEna4gVqsQ
              Что получилось пока что
              yadi.sk/i/uYVkELbfhI643g
              yadi.sk/i/ewTM-8ovdexneA
                Илья
                14 ноября 2019, 22:00
                0
                <div class="card">
                    <div class="card-header_" id="headingOne">
                      <h5 class="mb-0">
                        <img src="img/t1.png"><button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                         ТЕСТ
                        </button>
                      </h5>
                    </div>
                
                    <div id="collapseOne" class="collapse hjde" aria-labelledby="headingOne" data-parent="#accordion">
                      <div  class="card-body">
                       1
                       2
                      </div>
                    </div>
                  </div>
                Как оформить в pdomenu?) спасибо
                  Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                  13