Выпадающее меню в 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
После этого, пункт меню с выпадением станет кликабельным, а также, при наведении будет показываться выпадающий список подпунктов меню.
Комментарии