Анимированное меню на сайте под управлением 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.

Реклама

Партнеры

Поиск на сайте

Введите ваш запрос для начала поиска.