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

Дополнение: PdoTools

Добрый день. Возникла проблема с организацией меню. Раньше работал с 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, 14:20    Василий Одинцов   
0    1901 0

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

  1. 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 будет даже проще.
    1. Дмитрий Середюк 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
      1. 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>`
        ]]
        
        1. Василий Одинцов 19 сентября 2016, 09:40 # 0
          Большое всем спасибо — спасли. Способ, указанный Дмитрием Середюком работает как надо.
          1. Николай 15 марта 2017, 12:57 # 0
            А если необходимо добавить третий уровень?
            Сделал, но не отображается именно третий уровень, вместо него просто пустое поле
            1. Антон 16 марта 2017, 08:20 # 0
              &level=`3`
            2. Николай 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>`
              ]]
              Сделал так, но второй уровень меню выводится вместо третьего, а на месте второго уровня дублируется название первого(
              Вы должны авторизоваться, чтобы оставлять комментарии.