Помогите сделать меню в 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

10 191

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

Volodymyr

16 сентября 2016, 00:16

У меня вот так сделано:

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

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

16 сентября 2016, 14:38

на бутстрапе с клик/ховер

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

Большое всем спасибо — спасли. Способ, указанный Дмитрием Середюком работает как надо.

Николай

15 марта 2017, 12:57

А если необходимо добавить третий уровень?
Сделал, но не отображается именно третий уровень, вместо него просто пустое поле

~~Антон~~

16 марта 2017, 08:20

&level=`3`

Николай

15 марта 2017, 13:14

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

Первый раз использую 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

Спасибо братюня!
Твой единственный полностью рабочий способ (главное комментарии в коде убрать -) ), у всех остальных способов костыли ппц 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}`
        ]]

TonySq

23 июня 2018, 12:58

Рад был помочь)
Чтоб такое феном?

Александр

23 июня 2018, 13:16

docs.modx.pro/components/pdotools/parser#Шаблонизатор-Fenom

игорь моргунов

06 сентября 2018, 12:34

Помогите сделать меню. 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

<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?) спасибо

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.