В прошлых уроках мы уже создавали MODX меню: 1й — и 2й — Вывод стандартного выпадающего MODX меню с использованием Bootstrap. Сегодня мы научимся выводить многоуровневые Bootstrap меню с неограниченно степенью вложенности (3х уровневое меню, 4х, 5ти и т.д.).

Для примера я выведу 5-ти уровневое Bootstrap меню, вы же его сможете сделать и 3х уровневым и 7ми уровневым, хоть 10, поменяв значение level на нужное вам!

Вывод многоуровневого Bootstrap меню (с неограниченной вложенностью) в MODX при помощи PdoMenu.

Вывод многоуровневого меню будет таким:

[]>[[+wrapper]]` &tplInner=`@INLINE

[[+wrapper]]

` &tplParentRow=`@INLINE

[[+menutitle]][[+wrapper]]

` ]]

Из коробки оно работать не будет. так как Bootstrap 3 по умолчанию поддерживает только 2 уровня вложенности, и для того что бы расширить уровень вложенности bootstrap 3 меню, необходимо подключить js файл со следующим содержанием.

(function($){ $(document).ready(function(){ $("ul.dropdown-menu ").on("click", function(event) { event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass("open"); $(this).parent().toggleClass("open"); }); }); })(jQuery);

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

В моем случае получилось 2 строки CSS кода, чтобы уровни выпадали в бок.

Ul.dropdown-menu {left: 100%;top: -8px;} li.submenu1.dropdown.open>ul.dropdown-menu {left: 0%; top: 100%;}

У вас может получить немного другой (но идентичный этому) код и количество его строчек может быть больше в случае если у вас несколько веток меню с подменю. Ну и еще по мелочи придется поправить css под свой вкус, моя цель показать основу. Как найти нужные css классы в коде, к которым нужно применить стили показано в видео, ну а если быть точнее то там показан весь процесс создания многоуровневого меню.

В моем видео вышло вот такое меню

Если вам нужно повернуть треугольнички в выпадающем меню (они направлены в низ, когда выпадают элементы влево), что бы получилось вот так.

Тогда добавьте следующий css код:

Li.submenu2.dropdown>a>span.caret { -moz-transform: rotate(-95deg); -ms-transform: rotate(-95deg); -webkit-transform: rotate(-95deg); -o-transform: rotate(-95deg); transform: rotate(-95deg); } li.submenu3.dropdown>a>span.caret { -moz-transform: rotate(-95deg); -ms-transform: rotate(-95deg); -webkit-transform: rotate(-95deg); -o-transform: rotate(-95deg); transform: rotate(-95deg); } li.submenu4.dropdown>a>span.caret { -moz-transform: rotate(-95deg); -ms-transform: rotate(-95deg); -webkit-transform: rotate(-95deg); -o-transform: rotate(-95deg); transform: rotate(-95deg); }

Дата публикации: 07.02.2011

В этом несложном уроке я покажу, как настраивается меню.

Однажды меня попросили исправить баг с меню на одном сайте - некоторые пункты упорно не хотели выстраиваться в ряд, а вместо этого вылезали в неожиданных местах страницы при наведении курсора. Баг заключался не в кривом css, как я предположила сначала, а в криво настроенном вызове Wayfinder.

Что такое Wayfinder - это сниппет, который используется, когда нужно вывести список документов раздела/ов. В результате работы сниппета генерируется ненумерованный список. При помощи различных параметров с этим списком можно сделать все, что угодно:) Подробнее вы можете почитать в документации , или набрав в Google - “wayfinder modx wiki”.

Важные примечания:

1. О том, что такое MODx, как установить MODx, как организовать структуру документов, как из html сделать шаблон, что такое чанк и проч. вопросы новичков в этом уроке я не рассматриваю.

2. Плейсхолдеры, которые я буду использовать в уроке, указаны в том формате, который «понимает» Evo версия. В чем разница, смотрите пример:

Итак, разберем создание меню по шагам.

Шаг 1

Для урока набросала вот такое меню:

Здесь для наглядности я применила разные стили к разным уровням меню. На том сайте, где фиксила баг с меню, было примерно так же - у каждого уровня меню свой стиль.

Верстаем - подробности верстки в рамки данного урока не входят, вот такой код у меня получился:

• Главная
• Продукция
  • Сыворотка правды
  • Средство Макропулоса
  • Универсальные средства
• Доставка
  • Сыворотка правды
  • Средство Макропулоса
  • Универсальные средства
• Поставщики

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

ul class="menu" - класс всего меню
li class="top" - класс пунктов меню верхнего уровня
a class="top_link" - класс для ссылок в пунктах верхнего уровня
ul class="sub" - класс для подменю
ну и span class="down" для оформления пунктов верхнего уровня

Шаг 2. Создаем три документа

Продукция
- Доставка
- Поставщики
У документа «Продукция» создаем дочерние документы: «Сыворотка правды», «Средство Макропулоса», «Универсальные средства».

Шаг 3. Выносим меню в отдельный чанк

В шаблоне, в том месте где у вас должно быть меню, убираем весь лишний код (сам html код меню), вместо него пишем

{{ menu}}

Тем самым мы выносим меню в отдельный чанк. Потом создаем новый чанк и называем его menu . Пока в содержимое чанка можно скопировать код меню, который вы сверстали. Для наглядности.

Зайдите в админке в «Сайт»-> “Просмотр” - чтобы проверить, что все нормально с путями к файлу стилей и картинкам.

Получилось? Ок, но это еще не меню. Вдохнём в него жизнь при помощи Wayfinder.

Шаг 4

Удалите все содержимое чанка menu и вместо этого вызовите сниппет Wayfinder.
Пока напишем так:

[[ Wayfinder? &startId=`0`]]

параметр startId - указывает, с какого документа начинать формировать список. У нас указан 0 - это значит, что список формируется с корня дерева документов.

Посмотрим, что получилось:

Это - рабочее и живое меню. Переименовывайте документы, удаляйте, добавляйте - меню будет формироваться в соответствии с деревом документов.

Шаг 5

5.1. Tеперь приводим внешний вид меню в норму

Wayfinder по умолчанию формирует простой код () , все классы списков и элементов задаются специальными параметрами при вызове.

В начале урока мы определяли, какие css-классы в нашем меню за что отвечают. У Wayfinder имеются нужные нам параметры: outerClass - класс для контейнера меню. Сопоставив с нашей вёрсткой, получаем такой вызов Wayfinder:

[[ Wayfinder? &startId=`0` &level=`2` &outerClass=`menu`]]

помимо параметров с классами указываем уровень вложенности - &level=`2` .

Отмечаем недостатки - нет классов для пунктов меню верхнего уровня, нет тегов и класса для подменю.
Все эти недостатки исправляются добавлением соответствующих параметров к вызову Wayfinder.

5.2. Добавляем классы к пунктам верхнего уровня и теги

Для этого есть переменная rowTpl , которая описывает шаблон для пункта меню, делаем такой шаблон, для этого создаем чанк под названием parent:

[ +wf.linktext+][ +wf.wrapper+]

В вызове Wayfinder добавляем &rowTpl=`parent` .
Не забываем проверять исходный код - уже почти все хорошо, осталось подменю.

Для настройки подменю используем переменную innerRowTpl .

Создаем чанк inner :

[ +wf.linktext+][ +wf.wrapper+]

Добавляем в вызов Wayfinder переменную innerRowTpl=`inner` и переменную, которая указывает класс для контейнера подменю &innerClass=`sub` .

Окончательный вызов Wayfinder выглядит так:

[ ]

Всё, наше меню готово. Успехов!

Wayfinder служит для организации списков ссылок для MODX. Благодаря поддержке шаблонов позволяет выводить списки в любом необходимом виде:

• Меню в виде списка, таблицы, изображений, с иконками и т.д.
• Статичные меню
• Меню с различными эффектами (выпадающие, раскрывающиеся и т.д.)
• Карта сайта

Пример вызова:

&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`active`
&rowClass=`eNav_li`]]

Параметры снипета:

&startId - id родительской страницы, если указать 0 будет от корня сайта. По умолчанию стоит значение id активной страницы

&displayStart - показывать документ со startId в заголовке меню, по умолчанию false

&level - глубина вложенности, по умолчанию 0 - все уровни

&limit - ограничение количества страниц в выводе (по умолчанию 0 - без ограничений)

&ignoreHidden - игнорировать чек бокс страницы "Показывать в меню", т.е. если указать 1, выведет все страницы. По умолчанию 0. Выводятся только те страницы, у которых отмечен чек бокс "Показывать в меню"

&ph - имя подстановщика, заменяющего непосредственно выводимые результаты. По умолчанию 0.

&debug - режим отладки (по умолчанию 0)

&hideSubMenus - раскрывать только активное подменю (по умолчанию 0)

&removeNewLines - убирает символ переноса строки при выводе (по умолчанию 0)

&textOfLinks - для названия ссылки меню. Возможные варианты: menutitle, id, pagetitle, description, parent, alias, longtitle, introtext . По умолчанию menutitle

&titleOfLinks - для title ссылки меню.Варианты: menutitle, id, pagetitle, description, parent, alias, longtitle, introtext. По умолчанию pagetitle

&rowIdPrefix - устанавливает id (rowIdPrefix + docId)для каждого элемента. По умолчанию 0

&includeDocs - id документов через запятую, которые будут включены в меню (по умолчанию не указывается)

&excludeDocs - id документов через запятую, которые будут исключены из меню (по умолчанию 0)

&contexts - контекст для генерации меню. По умолчанию текущий.

&startIdContext - Индентификатор контекста из которого берутся документы для формирования результата.

&config - Внешний PHP файл, для хранения конфигурации Wayfinder (пример: core/components/wayfinder/configs).

&scheme - Формат для генерации URL. Возможные значения (основанны на вызове makeURL API):

1: (значение по умолчанию) URL по отношению к site_url;

0: смотрите http;

1: смотрите https;

full: абсолютный URL начинающийся с site_url;

abs: абсолютный URL начинающийся с base_url;

http: абсолютный URL, заданный принуждённо в http-схеме;

https: абсолютный URL, заданный принуждённо в https-схеме.

&sortBy - Поле, по которому происходит сортировка. (по умолчанию menuindex)

Варианты:

id, menutitle, pagetitle, introtext, menuindex, published, hidemenu, parent, isfolder, description, alias, longtitle, type, template

&sortOrder - Порядок сортировки. "ASC" или "DESC". По умолчанию ASC

&where - JSON-стиль параметров фильтрации (Соответствует where в MySQL) . Например, когда необходимо скрыть блог или новости из дополнения Articles: &where=`[{"class_key:!=": "Article"}]`
Примеры:
вывод только папок: & where = `isfolder = 1

&hereId - Определять текущий ID для использования в сниппете. Используйте значение [[*id]] если шаблон указан с помощью параметра hereTpl и activeRowParentTpl не применяеться корректно в пункте меню. По умолчанию текущий ид.
Нужно указывать только если скрипт сам его неверно определяет, например, при выводе меню из чанка другого сниппета.

&hereTpl - Шаблон hereTpl используется в момент, когда текущий пункт отображается в меню.
Возможные плэйсхолдеры:
[[+wf.classes]] - место для указания используемого CSS-класса (включает class=" ")
[[+wf.classnames]] - содержит только название CSS-класса (не включает class=" ")
[[+wf.link]] - адрес (href) для ссылки
[[+wf.title]] - текст для title ссылки
[[+wf.linktext]] - текст названия ссылки
[[+wf.wrapper]] - место для вывода подменю
[[+wf.id]] - вывод уникального идентификатора (id)
[[+wf.attributes]] - вывод дополнительных атрибутов ссылки
[[+wf.docid]] - идентификатор документа для текущего элемента
[[+wf.subitemcount]] -количество элементов в папке
[[+wf.description]] - выводит значения поля описания
[[+wf.introtext]] - выводит значения поля интротекста

Пример шаблона: [[+wf.linktext]][[+wf.wrapper]]

Параметры шаблона

Эти параметры указывают чанки, которые содержат шаблоны, которые будут генерировать вывод Wayfinder.

В текущей версии Wayfinder для MODX Revolution, вы можете получить доступ к вашим кастомным TV используя плейсхолдеры префикса wf. , например [[+my_TV]]

На момент написания статьи, будут возвращены только исходные значения TV - они не будут форматироваться. Например, если вашим TV является изображение - обычное использование такое TV внутри вашего шаблона будет возвращать полный полный тег изображения, но внутри шаблона Wayfinder - будет возвращён только путь к изображению.

Если вы хотите обрабатывать TV, вы можете сделать это вызовом сниппета в пределах шаблона ряда Wayfinder (&rowTpl . Например ваш TV изображения называется icon и обычно для вывода в шаблоне используется примерно такой код:

... ...

Но так как это не позволит вам обрабатывать TV, нужно заменить его на:

... ...

И теперь внутри сниппета processTV помещаем следующий PHP код:

getObject("modResource", $myId); return $doc->getTVValue($myTV);

В результате возвращается полностью обработаное TV изображения.

&outerTpl

Название чанка содержащий шаблон внешнего контейнера.

Доступные плейсхолдеры:

• wf.classes - выводит классы взятый с набора параметров Wayfinder (включая атрибут class="")
• wf.classnames - вывод названия классов (без class="")
• wf.wrapper - вывод внутреннего содержимого (row).

[[+wf.wrapper]]

Параметр &innerTpl содержит такой же набор плейсхолдеров что и &outerTpl .

&rowTpl

Название чанка содержащий шаблон для элементов ряда меню.

Доступные плейсхолдеры:

• wf.classes - вывод классов (включая атрибут class="")
• wf.classnames - вывод соответствующих классов (без class="")
• wf.link - значение атрибута href="" для ссылки меню
• wf.title - имя текста заголовка для ссылки от поля указанного в параметре &titleOfLinks
• wf.linktext - текст для действующей ссылки, указанном в поле, переданным в параметре &textOfLinks
• wf.wrapper - вывод внутреннего содержимого, например подменю
• wf.id - вывод уникального ID атрибута. Вам нужно указать параметр &rowIdPrefix для того чтобы этот заполнитель мог получить значение. Значением является префикс + docId.
• wf.attributes - выводит ссылку атрибутов для текущего элемента
• wf.docid - идентификатор документа текущего элемента
• wf.description - описание для текущего элемента
• wf.level - текущий уровень вложенности

Пример использования:

[[+wf.linktext]][[+wf.wrapper]]

Ещё один вариант:

[[+wf.linktext]] - [[+wf.description]] [[+wf.wrapper]]

Примеры

Первого уровня

[[!Wayfinder? &startId=`0` &level=`1`
&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`active`
&rowClass=`eNav_li`]]

Код чанка outerTpl

[[+wf.wrapper]]

Код чанка rowTpl

[[+wf.wrapper]]

Второго уровня (в этом примере меню и пункты подменю были визуально на одном уровне

[[!Wayfinder? &startId=`0` &level=`2`
&rowTpl=`rowTplFooterMenu`
&outerTpl=`outerTplFooterMenu`
&innerTpl=`innerTplFooterMenu`
&innerRowTpl=`innerRowTplFooterMenu`
&hereClass=`active`]]

Код чанка outerTplFooterMenu

код чанка rowTplFooterMenu

• 
  
  [[+wf.title]]
  
  

[[+wf.wrapper]]

код чанка innerTplFooterMenu

[[+wf.wrapper]]

код чанка innerRowTplFooterMenu

[[+wf.title]]

Приветствую вас уважаемые читатели. В прошлом уроке мы наполнили немного сайт контентом (), теперь пора это все вывести в меню , чтобы пользователи могли переходить на них.

Создавать динамическое меню в MODX мы будем при помощи сниппета PdoMenu из пакета pdoTools . Перед тем как начать ознакомьтесь с основной документацией.

Документация по pdoMenu

Параметры

Параметры шаблонов

Параметры CSS классов

Официальные примеры

официальную документацию можете почитать здесь . А сейчас разберем самые типовые вызовы меню.

Вызов PdoMenu

Вариант 1 . На месте этого статического меню вызовем сниппет pdoMenu , для этого в дереве ресурсов, на вкладке “Элементы ” в разделе сниппеты разверните ветку pdoTools , далее нажмите на pdoMenu левой кнопкой мыши (не отпускайте кнопку) и перетащите этот сниппет в место, где вы хотите вызвать меню, далее в открывшемся окошке заполните необходимые параметры и нажмите «Сохранить «.

Вариант 2 . Просто вручную пишем вызов.

Типовые примеры

Обычное одноуровневое меню

К примеру у нас самое обычное меню, со следующей html разметкой.

Получился вот такой код с вызовом меню:

• &parents=`0` — список родителей (в моем случае я не ограничиваю выборку, так как я все равно выведу только определенные страницы);
• &level=`1` — уровень вложенности (в данном случае ее нет);
• &resources=`2,3,4,5` — список ресурсов которые нужно вывести в меню;
• &firstClass=`0` — класс для первого пункта меню (не какого);
• &lastClass=`0` — класс последнего пункта меню (не какого);
• &outerClass=`top-menu` — класс обертки меню (подставляется в ul);
• &hereClass=`current-menu-item` — класс для активного пункта меню (подставляется в li);
• &rowClass=`menu-item` — класс одной строки меню (подставляется в li).

Двухуровневое кастомное bootstrap меню

Статический html код выглядит так:

Код его вывода будет таким:

Так же в следующем уроке я приведу еще пару выводов выпадающих меню, на основе bootstrap ( и , это для тех кто не уловил суть. Ну а далее сделаем .

На первый взгляд выглядит все сложно, но то не так, читайте подробнее документацию, задавайте вопросы в комментариях обязательно помогу.

Для создания динамического меню мы воспользуемся готовым сниппетом Wayfinder . Сниппет, как вы, надеюсь, помните из предыдущих уроков, это кусок Php кода, который мы можем включать в наш шаблон. Отличие от чанков только в коде и методе вызова. Если чанк мы вызываем с помощью двойных фигурных скобок, то сниппеты вызываются с помощью таких [!Имя_сниппета!] - некэшируемый вызов, или таких [[Имя_сниппета]] - кэшируемый вызов. Код каждого сниппета должен начинаться с а заканчиваться ?> . Помимо этого, каждому сниппету можно передавать специальные значения параметров, которые он будет обрабатывать. В MODx уже есть несколько готовых сниппетов, которые мы будем в дальнейшем использовать.

Сниппет Wayfinder служит для организации списков ссылок для MODx. Меню нашего сайта и есть список таких ссылок. Давайте для начала найдем кусок кода, отвечающего за вывод нашего меню. Меню находится в чанке HEADER , вот оно:

• Welcome


• Design Blog


• Portfolio


• Our Company


• Contact Us

Давайте вырежем этот код, вместо него напишем:

{{MENU}}

А код вставим в новый чанк MENU , в описании чанка напишем Меню сайта . Теперь давайте изучим этот код.

Меню нашего сайта представляет собой простой, ненумерованный список, находящийся в контейнере с id="templatemo_menu" . Давайте вырежем этот список из контейнера и вместо него вставим вызов нашего сниппета:

[!Wayfinder? &startId=`0`!]

&startId=`0` - это параметр со значением 0, который указывает сниппету ID папки, в которой лежат обрабатываемые документы. Все наши документы, которые мы будем отображать в меню, лежат в корневой папке, ID корневой папки равен нулю. Давайте посмотрим, что у нас получилось.

Наше меню заработало, только активный пукнт перестал выделяться белым цветом:

Чтобы понять, почему это произошло, нам надо посмотреть исходный код страницы. В Mozilla Firefox это делается таким образом: Вид >> Исходный код страницы или просто нажав сочетание клавиш Ctrl+U . Находим код нашего меню:

• Главная


• Блог о дизайне


• Портфолио


• О компании


• Контакты

Обращаем внимание на то, что в исходном коде у активного пункта был class="current" , а наш сниппет автоматически присваивает активному пункту class="active" . Замечаем еще тот момент, что в исходном коде класс применялся к тегу , а теперь к тегу

. Переписывать сниппет мы не будем, а вот поменять класс в стилях - нет проблем.

Находим в папке C:/xampp/htdocs/site/www/assets/templates/ файл templatemo_style.css и открываем его с помощью Notepad++. Ищем в этом файле описание класса current, оно находится в 198 строке:

#templatemo_menu li .current{
padding-left: 40px;
color: #ffffff;
}

заменяем класс current на active , не забывая переназначить его тегу :

#templatemo_menu li.active a {
padding-left: 40px;
color: #ffffff;
}

Сохраняем файл. Смотрим, что получилось.
Наше меню заработало точно так, как это задумывали дизайнеры. Теперь мы можем переходить по страницам нашего сайта с помощью нашего главного меню. При добавлении в корневую папку других документов, они автоматически будут отображаться в нашем меню. Чтобы нежелательные документы не отображались в меню, у них следует убрать галочку с Показывать в меню . Можно принудительно исключить нежелательный пункт с помощью параметра &excludeDocs=`список id исключаемых документов, через запятую` .

Чтобы в меню не отображались дочерние документы, которые мы будем создавать на следующих уроках, давайте добавим в вызов сниппета параметр level , который определяет количество уровней в меню, по умолчанию будут отображаться все уровни, ограничим только одним уровнем:

[!Wayfinder? &startId=`0` &level=`1`!]

Поделись статьей:

Похожие статьи

17 апреля 2015
Internet Accelerator - оптимизация интернет соединения для Android Новые программы для ускорения интернета apk

17 апреля 2015
Как легко упорядочить коллекцию фото и видео в Windows по датам!

17 апреля 2015
Изменились банковские реквизиты для плательщиков дополнительных страховых взносов на накопительную пенсию Контроль за исполнением регламента при представлении персонифицированной отчетности

17 апреля 2015
Как сделать скриншот монитора