В общем, если честно, то не очень понравился вариант
http://blogs.sitepoint.com/2009/03/30/mega-drop-down-menus/ и jQuery
, поэтому пошел своим путем:
Давно известно, что из Wayfinder’а можно получить хлебные крошки:
http://wiki.modxcms.com/index.php/Breadcrumb_navigation_with_Wayfinder, так вот, я решил немного изменить этот вариант:
Основной вызов сниппета теперь такой:
<ul id="Breadcrumb">
<li><a href="[~[(site_start)]~]" title="[(site_name)]">Главная »</a></li>
[!Wayfinder? &startId=`0` &titleOfLinks=`menutitle` &outerTpl=`Breadcrumb.OuterTpl` &rowTpl=`Breadcrumb.RowTpl` &activeParentRowTpl=`Breadcrumb.activeParentRowTpl` &hereTpl=`Breadcrumb.HereTpl` !]
</ul>
Чанки у нас содержат:
Breadcrumb.OuterTpl:
Breadcrumb.RowTpl:
(Пусто, но обязательно с пробелом! Иначе, будет использоваться стандартный шаблон)
Breadcrumb.HereTpl:
<li>[+wf.linktext+] </li>
А теперь самое интересно - Breadcrumb.activeParentRowTpl:
<li><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+] »</a> [[Wayfinder? &startId=`[+wf.docid+]` &level=`1` &outerTpl=`minimh.OuterTpl` &rowTpl=`minimh.RowTpl` &titleOfLinks=`menutitle`]]
</li>[+wf.wrapper+]
Т.е. activeParentRowTpl - изначально настраивает вывод активных директорий, а мы же в чанке еще раз вызываем Wayfinder, который начинает сканирование с ID данной активной директории.
Теперь чанки для второго вызова:
minimh.OuterTpl:
<ul>
[+wf.wrapper+]
</ul>
minimh.RowTpl:
<li><a href="[+wf.link+]" title="[+wf.title+]">→ [+wf.linktext+]</a>[+wf.wrapper+]</li>
Вот и все, теперь результат работы будет вот такой код:
<ul id="Breadcrumb">
<li>
<a href="index" title="">Главная »</a>
</li>
<li>
<a href="/index" title="">Продукция »</a>
<ul>
<li><a href="/index" title="">→ Вакуумная техника</a></li>
<li><a href="/index" title="">→ Компрессорная техника и воздуходувки</a></li>
<li><a href="/index" title="">→ Установки</a></li>
<li><a href="/index" title="">→ Средства измерения и контроля</a></li>
<li><a href="/index" title="">→ Вакуумная арматура и комплектующие</a></li>
<li><a href="/index" title="">→ Системы очистки воздуха</a></li>
</ul>
</li>
<li><a href="/index" title="">Системы очистки воздуха »</a>
<ul>
<li><a href="/index" title="">→ Фильтры для вакуумной техники</a></li>
<li><a href="/index" title="">→ Фильтры для компрессорной техники</a></li>
<li><a href="/index" title="">→ Масляные фильтры-сепараторы</a></li>
</ul>
</li>
<li>
Фильтры для компрессорной техники
</li>
</ul>
Нетрудно увидеть, что код получился такой же, как и для обычного меню, а следовательно применив css, мы получим вот такие симпатичные и функциональные хлебные крошки:
Надеюсь, кому-нибудь будет полезен такой подход.
