Выпадающее меню в MODX с использованием Bootstrap

Разберём два способа создания выпадающего меню для MODX с помощью фреймворка Bootstrap. Для создания меню возьмём компонент PdoMenu.

Если вы не знаете, как пользоваться PdoMenu, то читайте статью - создание меню в MODX c помощью PdoMenu.

Выпадающее меню по клику

Создадим классическую bootstrap-навигацию. Где выпадающее меню открываются по клику.

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

Всё просто, мы просто подогнали наш компонент для вызова стандартного bootstrap-меню.

Выпадающее меню при наведении

Вот здесь уже по сложнее, заметим то, что по умолчанию выпадающее меню в bootstrap не показывается через наведение.

Вызываем наше меню следующим образом:

[[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]]
                                </a>
                               [[+wrapper]]
                            </li>`
]]

Также для работы следует подключить скрипт (подключите его ниже библиотеки bootstrap)

Скачать скрипт bootstrap3-hover

После этого, пункт меню с выпадением станет кликабельным, а также, при наведении будет показываться выпадающий список подпунктов меню.