Freecode Academy

РЕШЕН вопрос оказывается. В одном из постов уважае

plazma50

РЕШЕН вопрос оказывается. В одном из постов уважаемый ВДВ описал это сверх простое решение, но оно осталось не замеченным. А решение на мой взгляд гениальное. Я всего четыре последние строки добавил к его решению (в CSS) чтобы выезжающие подпункты сдвигались в сторону и красивее было. В результате 3-х уровневое меню отлично работает. Итак, нужно сделать следующее:

  1. Настройка-наборы параметров-для MainMenu ставим уровень 3. Здесь же можно выключить те п.меню из которых выезжать ничего не должно {"parent:not in":[5,110,196]}
  2. В шаблон menu.tpl добавляем шаблон для подпунктов и убираем data атрибут для открытие по клику.
{block menu_params}
       {$params = [
        "parentRowTpl" => '@CODE <li[[+wf.id]] class="dropdown">
            <a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]] class="dropdown-toggle">[[+wf.linktext]] <span class="caret"></span></a>
            [[+wf.wrapper]]
        </li>',
        "rowTpl" =>'@CODE <li class="dropdown">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
</li>',
        "outerClass" => 'nav navbar-nav',
        "innerClass" => 'dropdown-menu'
    ]}
{/block}
  1. В файлик assets/components/modxsite/templates/shopmodx/bundle/styles/styles.css чтобы меню раскрывалось при наведении мыши и чтобы оно было сдвинуто относительно 2-го уровня в конец дописываем
.dropdown:hover > .dropdown-menu {    
    display: block;
}
.dropdown-menu .dropdown .dropdown-menu {   
    left: 200px;
    top:-0px;
}

И ВСЁ!!! Собственно дальше можно менять эти left, top еще что-то добавлять для красоты.