Динамическое меню каталога товаров в Demodizzy
В данной статье речь пойдет о том как немного украсить ваш сайт и сделать его более интерактивным. И так, ниже будет описан простой способ сделать анимированное меню каталога с помощью методов jquery ui.
Задача: Сделать двухуровневое меню, второй уровень которого по умолчанию скрыт. При наведении мыши на какой либо раздел меню, снизу от него должны плавно выезжать подразделы. При наведении курсора на другой пункт меню, старые подразделы должны исчезать, и появятся новые, в соответствии с выбранным пунктом меню.
И так, для начала нам потребуется в шаблоне нашего сайта подключить все необходимые библиотеки jquery. Так как в UMI уже, по умолчанию, подключена основная библиотека jquery, нам потребуется лишь подключить скрипты эффектов и файл с нашим будущим кастомным скриптом. Так как в нашем примере мы рассматриваем верстку на основе XSLT то соответственно скрипты должны быть вставлены в файл, где прописана верстка тегов <head> (по умолчанию - ~\xsltTpls\layouts\default.xsl)
Нужные нам скрипты подключаются следующим образом:
<script charset="utf-8" src="/js/jquery/jquery.effects.core.js" type="text/javascript"></script>
Соответственно файл jquery.effects.core.js нужно скачать с официального сайта Jquery.
И теперь подключим непосредственно наш будущий скрипт. Для данного примера назовем его My.js и положим в папку ~/js/
<script charset="utf-8" src="/js/My.js" type="text/javascript"></script>
Следующим нашим действием будет добавление дополнительных тегов в верстку сайта, необходимых для работы скрипта.
Файл отвечающий за левое меню находится: ~\xsltTpls\modules\catalog\left-column-category-list.xsl
Изначально, интересующий нас блок выглядит следующим образом:
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<li umi:element-id="{@id}" umi:region="row">
<span>
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" />
</li>
</xsl:template>
Добавим дополнительные теги, для яваскрипта:
<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
<div class="cat1">
<li umi:element-id="{@id}" umi:region="row" >
<span onMouseOver="open_menu(this)" >
<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
<xsl:value-of select="." />
</a>
</span>
<div class="cat2" style="display: none; height:1">
<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
</div>
</li>
</div>
</xsl:template>
Некоторое пояснение к тому что именно мы добавили:
Вызов отвечающий за вывод подменю мы окружили тегом
