Добрый день!
Помогите пожалуйста разобраться с меню групп товаров интернет магазина.
Хочу сделать многоуровневое меню как на демо сайте -
Таким должен быть html меню
<section>
<h4>Категории</h4>
<div class="block_content">
<ul class="menu clearfix">
<li class=""><a href="">Категория 1</a>
<div class="is-megamenu">
<div id="megamenu-row-1" class="megamenu-row row megamenu-row-1">
<div id="column-1-1" class="megamenu-col megamenu-col-1-1 col-sm-3 ">
<ul class="content">
<li class="category">
<a href="">Категория второго уровня</a>
<ul>
<li class="category"><a href="">Категория третьего уровня</a></li>
<li class="category"><a href="">Категория третьего уровня</a></li>
<li class="category"><a href="">Категория третьего уровня</a></li>
</ul>
</li>
</ul>
</div>
<div id="column-1-2" class="megamenu-col megamenu-col-1-2 col-sm-3 ">
<ul class="content">
<li class="category">
<a href="">Категория второго уровня</a>
<ul>
<li class="category"><a href="">Категория третьего уровня</a></li>
<li class="category"><a href="">Категория третьего уровня</a></li>
<li class="category"><a href="">Категория третьего уровня</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class=""><a href="">Категория 2</a></li>
<li class=""><a href="">Категория 3</a></li>
</ul>
</div>
</section>
Это XSL
<xsl:template match="/shop">
<section class="left_column_menu block">
<h4 class="title_block">Категории</h4>
<div class="block_content">
<ul class="menu clearfix">
<xsl:apply-templates select="shop_group" />
</ul>
</div>
</section>
</xsl:template>
<xsl:template match="shop_group">
<li class="">
<xsl:variable name="hasChildren" select="count(shop_group)" />
<a href="{url}"><xsl:value-of select="name"/></a>
<xsl:if test="$hasChildren">
<div class="is-megamenu">
<div id="megamenu-row-1" class="megamenu-row row megamenu-row-1">
<div id="column-1-1" class="megamenu-col megamenu-col-1-1 col-sm-3 ">
<ul class="content">
<li class="category">
<ul>
<li class="category">
<xsl:apply-templates select="shop_group" />
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</xsl:if>
</li>
</xsl:template>
Это html на выходе
<section class="left_column_menu block">
<h4 class="title_block">Категории</h4>
<div class="block_content">
<ul class="menu clearfix">
<li class=""><a href="">Категория 1</a>
<div class="is-megamenu">
<div id="megamenu-row-1" class="megamenu-row row megamenu-row-1">
<div id="column-1-1" class="megamenu-col megamenu-col-1-1 col-sm-3 ">
<ul class="content">
<li class="category">
<ul>
<li class="category">
<li class="">
<a href="">Категория второго уровня</a>
<div class="is-megamenu">
<div id="megamenu-row-1" class="megamenu-row row megamenu-row-1">
<div id="column-1-1" class="megamenu-col megamenu-col-1-1 col-sm-3 ">
<ul class="content">
<li class="category">
<ul>
<li class="category">
<li class=""><a href="">Категория третьего уровня</a></li>
<li class=""><a href="">Категория третьего уровня</a></li>
<li class=""><a href="">Категория третьего уровня</a></li>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="">
<a href="">Категория второго уровня</a>
<div class="is-megamenu">
<div id="megamenu-row-1" class="megamenu-row row megamenu-row-1">
<div id="column-1-1" class="megamenu-col megamenu-col-1-1 col-sm-3 ">
<ul class="content">
<li class="category">
<ul>
<li class="category">
<li class=""><a href="">Категория третьего уровня</a></li>
<li class=""><a href="">Категория третьего уровня</a></li>
<li class=""><a href="">Категория третьего уровня</a></li>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class=""><a href="">Категория 2</a></li>
<li class=""><a href="">Категория 3</a></li>
</ul>
</div>
</section>