МЕНЮ / Раскрывающееся вертикальное меню для каталога товаров

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE xsl:stylesheet>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform";

xmlns:hostcms="http://www.hostcms.ru/";

exclude-result-prefixes="hostcms">

<xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict"; doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>

<!-- МагазинГруппыТоваровНаГлавной -->

<xsl:template match="/">

<xsl:apply-templates select="/shop"/>

</xsl:template>

<!-- Шаблон для магазина -->

<xsl:template match="/shop">

<div class="left-block-widget">

<h4>Каталог товаров</h4>

<div class="shop-group-menu">

<ul>

<xsl:apply-templates select="shop_group"/>

</ul>

</div>

</div>

</xsl:template>

<!-- Шаблон для групп товара -->

<xsl:template match="shop_group">

<li>

<h6><xsl:value-of disable-output-escaping="yes" select="name"/></h6>

<!-- Если есть подгруппы -->

<xsl:if test="shop_group">

<ul id="submenu_{@id}" >

<xsl:apply-templates select="shop_group" mode="subgroup1"/>

</ul>

</xsl:if>

</li>

</xsl:template>

<!-- Шаблон для групп товара -->

<xsl:template match="shop_group" mode="subgroup1">

<li>

<xsl:if test="@id = /shop/current_group_id or .//shop_group/@id = /shop/current_group_id">

<xsl:attribute name="class">current</xsl:attribute>

</xsl:if>

<xsl:choose>

<xsl:when test="shop_group">

<a onclick="$('#submenu_{@id}').toggle('slow'); $(this).toggleClass('opened')" class="groups">

<xsl:if test="@id = /shop/current_group_id or .//shop_group/@id = /shop/current_group_id">

<xsl:attribute name="class">groups current-group opened</xsl:attribute>

</xsl:if>

<xsl:value-of disable-output-escaping="yes" select="name"/>

</a>

</xsl:when>

<xsl:otherwise>

<a href="{url}" >

<xsl:if test="@id = /shop/current_group_id">

<xsl:attribute name="class">current-group</xsl:attribute>

</xsl:if>

<xsl:value-of disable-output-escaping="yes" select="name"/>

</a>

</xsl:otherwise>

</xsl:choose>

<!-- Если есть подгруппы -->

<xsl:if test="shop_group">

<ul id="submenu_{@id}" class="level0" style="display: none;">

<xsl:if test=".//shop_group/@id = /shop/current_group_id">

<xsl:attribute name="style">display:block</xsl:attribute>

<xsl:attribute name="class">level0 opened</xsl:attribute>

</xsl:if>

<xsl:apply-templates select="shop_group" mode="subgroup2"/>

</ul>

</xsl:if>

</li>

</xsl:template>

<!-- Шаблон для групп товара -->

<xsl:template match="shop_group" mode="subgroup2">

<li>

<xsl:if test="@id = /shop/current_group_id">

<xsl:attribute name="class">current</xsl:attribute>

</xsl:if>

<xsl:choose>

<xsl:when test="shop_group">

<a onclick="$('#submenu_{@id}').toggle('slow'); $(this).toggleClass('opened')" class="groups">

<xsl:if test="@id = /shop/current_group_id">

<xsl:attribute name="class">current-group</xsl:attribute>

</xsl:if>

<xsl:value-of disable-output-escaping="yes" select="name"/>

</a>

</xsl:when>

<xsl:otherwise>

<a href="{url}" >

<xsl:if test="@id = /shop/current_group_id">

<xsl:attribute name="class">current-group</xsl:attribute>

</xsl:if>

<xsl:value-of disable-output-escaping="yes" select="name"/>

</a>

</xsl:otherwise>

</xsl:choose>

<!-- Если есть подгруппы -->

<xsl:if test="shop_group">

<ul id="submenu_{@id}" class="level0" style="display: none;">

<xsl:if test=".//shop_group/@id = /shop/current_group_id">

<xsl:attribute name="style">display:block</xsl:attribute>

<xsl:attribute name="class">level0 opened</xsl:attribute>

</xsl:if>

<xsl:apply-templates select="shop_group" mode="subgroup2"/>

</ul>

</xsl:if>

</li>

</xsl:template>

</xsl:stylesheet>

/* Группы магазина */

.shop-group-menu ul {

padding: 0;

margin: 0;

}

.shop-group-menu ul li {

border-bottom: 1px solid #dedede;

margin: 0;

padding: 0;

/*overflow: hidden;*/

list-style-type:none;

}

.shop-group-menu ul li:last-child {

border-bottom: medium none;

}

.shop-group-menu li a {border:0;

cursor:pointer;

color: #666;

font-size: 15px;

font-weight: 300;

text-decoration: none;

padding: 2px 15px;

display:block;

position:relative;

}

.shop-group-menu >ul >li >h6 {background:#00abaf; color:#fff; padding:8px 12px 8px 20px; margin:10px -15px 4px;}

.shop-group-menu li a:hover {background:#f2f2f2; color: @primary-color }

.shop-group-menu li a.groups:after {

display: block;

content: "+";

font-size:15px;

position: absolute;

top: 6px;

right: 2px;

color: #999;

}

.shop-group-menu li a.opened:after {

content: "-";

}

.shop-group-menu li a.current-group {font-weight:600;}

.shop-group-menu ul li a i {position:absolute; right:0; top:5px; font-size:10px; color:#999;}

.shop-group-menu ul ul ul li {margin-left:0;}

.shop-group-menu ul ul ul {background:#f2f2f2;}

.shop-group-menu ul ul ul ul {background:#eee;}