Анимированное меню на сайте под управлением MODx
Хотя с помощью CSS можно создавать достаточно сложные меню, анимацию в меню можно создать только с использованием программ на JavaScript или технологии Flash, причем удобнее работать с Flash-анимацией. Имеющиеся в MODx средства позволяют без особых усилий встраивать анимированные меню в сайты.
Инструмент создания меню
Имеется ряд инструментов, позволяющих создавать анимированные меню даже без необходимости освоения программы Adobe Flash, и в данном примере используется один из них. Скачайте файлы проекта Flash Menu Labs Open Source Edition в виде архива и распакуйте его на своем компьютере. С помощью данного средства можно создавать такие вертикальные меню, как в расположенном рядом примере.
Поместите файл Flash_Menu_Labs_open_source.swf в папку сайта assets/flash. Следует отметить, что вы можете изменить меню по своему усмотрению, после чего сгенерировать новый исполняемый файл, но в примере будет рассматриваться исходный вариант меню.
Настройка Wayfinder
Для генерации меню следует создать несколько чанков, использующихся сниппетом Wayfinder. Вначале создайте чанк outerTpl и скопируйте в него содержимое файла menu.xml из скачанного ранее архива. Найдите в коде заголовок MENU STRUCTURE и замените все строки, начиная с него до строки </menu_structure> следующим кодом:
<!-- MENU STRUCTURE -->
<menu_structure>
<item>
[+wf.wrapper+]
</item>
</menu_structure>
Далее создайте чанк innerTpl, записав в него одну команду: [+wf.wrapper+]. Создав чанк parentRowTpl, поместите в него такой код:
<item text = "[+wf.linktext+]"
url = "[+wf.link+]" url_self = "1" >
[+wf.wrapper+]
</item>
И последний чанк, который нужен для меню: rowTpl. В него необходимо поместить такой код:
<item text = "[+wf.linktext+]"
url = "[+wf.link+]" url_self = "1" />
Создайте новый документ в корне сайта, назначив ему пустой шаблон: (blank). Выберите для документа тип содержимого text/xml и задайте псевдоним menu.xml. Далее добавьте в текст документа вызов: [[Wayfinder? &startId=`0` &titleOfLinks=`longtitle` &rowTpl=`rowTpl` &parentRowTpl=`parentRowTpl` &innerTpl=`innerTpl` &outerTpl=`outerTpl` ]] и сохраните его. Предварительные настройки выполнены, и можно приступать к основной работе по созданию меню.
Вызов меню в шаблоне
Для удобства поисковых систем и пользователей, не имеющих проигрывателя Flash, анимированное меню будет динамически заменять обычное меню. С этой целью используется средство SWFObject, загружаемое с сервера Google. Отредактируйте используемые шаблоны, чтобы в заголовки страниц сайта были добавлены команды:
<script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js">
</script>
<script type="text/javascript">
swfobject.embedSWF(
"assets/flash/Flash_Menu_Labs_open_source.swf",
"mainmenu", "300", "400", "8.0.0", false, false,
{wmode:"transparent", scale:"noscale", salign: "TL"},
false);
</script>
Конкретные цифры, описывающие размеры меню, требуется задать в соответствии с особенностями сайта. В случае использования тега base необходимо не забыть добавить после него конструкцию <!––[if IE]></base><![endif]––>, иначе в некоторых версиях Internet Explorer возникнет ошибка и страница не будет загружена. В месте, где планируется выводить меню, вставьте примерно такой код:
<div id="mainmenu" > [[Wayfinder? &startId=`0` ]] </div>
На этом вся работа закончена – вы можете просмотреть только что созданное анимированное меню на своем сайте. Возможно, потребуется дополнительная настройка CSS, чтобы все выглядело так, как задумывалось. Кроме того, в начальных строках чанка outerTpl можно задать особенности функционирования меню – в примере на этой странице настройки отличаются от стандартных. Следует отметить, что используя описанные приемы, вы можете использовать на сайте под управлением MODx и другие варианты анимированных меню, управляемых файлами формата xml.
