Вывод стандартного выпадающего Bootstrap меню

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

Изменена: 24 октября 2018 в 0:54

В прошлом уроке мы уже делали меню для сайта при помощи PdoMenu и если вы еще не разу не делали меню, тогда обязательно прочтите этот урок. Сегодня я решил показать как вывести стандартное выпадающее bootstrap меню на сайта под управлением MODX при помощи сниппета PdoMenu.

Вывод одна уровневого и 2х-уровневого bootstrap меню при помощи PdoMenu

Создаём стандартную bootstrap навигацию (getbootstrap.com/components/#navbar), и на месте основной навигации выводим следующий код:

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

Если вам нужен только один уровень, то значение level меняем на 1.

Данное меню будет раскрываться по клику. Если вы хотите что меню раскрывалось при наведении курсора мыши, тогда вызов будет таким:

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

Плюс ко всему тому, вам нужно будет подключить дополнительный скрипт вот с таким содержимым:

(function(b,a,c){var d=b();b.fn.dropdownHover=function(e){if("ontouchstart" in document){return this}d=d.add(this.parent());return this.each(function(){var m=b(this),l=m.parent(),k={delay:500,instantlyCloseOthers:true},i={delay:b(this).data("delay"),instantlyCloseOthers:b(this).data("close-others")},f="show.bs.dropdown",j="hide.bs.dropdown",g=b.extend(true,{},k,e,i),h;l.hover(function(n){if(!l.hasClass("open")&&!m.is(n.target)){return true}d.find(":focus").blur();if(g.instantlyCloseOthers===true){d.removeClass("open")}a.clearTimeout(h);l.addClass("open");m.trigger(f)},function(){h=a.setTimeout(function(){l.removeClass("open");m.trigger(j)},g.delay)});m.hover(function(){d.find(":focus").blur();if(g.instantlyCloseOthers===true){d.removeClass("open")}a.clearTimeout(h);l.addClass("open");m.trigger(f)});l.find(".dropdown-submenu").each(function(){var o=b(this);var n;o.hover(function(){a.clearTimeout(n);o.children(".dropdown-menu").show();o.siblings().children(".dropdown-menu").hide()},function(){var p=o.children(".dropdown-menu");n=a.setTimeout(function(){p.hide()},g.delay)})})})};b(document).ready(function(){b('[data-hover="dropdown"]').dropdownHover()})})(jQuery,this);

Для этого создаете файл к примеру hover-bs-3.js, вставляете в него выше приведенный код и подключаете к шаблону

<script src="путь_к_файлу/hover-bs-3.js"></script>

Если что то не получается пишите в комментариях, обязательно помогу.

Ну а на сегодня все, теперь вы знаете как в modx выводить стандартное Bootstrap меню помощи сниппета PdoMenu.

Если Вам нужно 3, и более уровней вложенности, то для вас я подготовил еще один урок: Многоуровневое MODX меню с использованием Bootstrap.

Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
web-revenue.ru
Добавить комментарий

  1. Влад Ефимов

    Как изначально скрыть меню?
    После написания параметров выпадающее меню появилось, но оно не исчезает, то есть оно активно всегда

    Ответить
    1. Alex87

      Значит что то не правильно где-то написали

      Ответить
  2. Олег

    Здравствуйте, подскажите а как сделать, чтобы на мобильной версии оставалось выпадающее меню при клике, а на компьютере при наведении.

    Ответить
  3. Михаил

    Здравствуйте. Спасибо за скрипт. Есть одна проблема. Если зайти в один и выпадающих подразделов, потом навести мышкой снизу, то блок не выпадет…только сверху

    Ответить
    1. Alex87

      Не совсем понял о чем вы. Прикрепляйте скриншоты к комментариям.

      Ответить