МЕНЮ / РАСКРЫВАЮЩЕЕСЯ ГОРИЗОНТАЛЬНОЕ МЕНЮ КАТАЛОГА ТОВАРОВ

Заметка создана: 14 января 2025 г.

Добавляем этот код в Макет, в место, где нужно вывести меню

<?php
                // Разделы магазина
                if (Core::moduleIsActive('shop'))
                {
                    $Shop_Controller_Show = new Shop_Controller_Show(
                        Core_Entity::factory('Shop', 3)
                    );
                    $Shop_Controller_Show
                        ->xsl(
                            Core_Entity::factory('Xsl')->getByName('МагазинГруппыТоваровСлеваСайт2')
                        )
                        ->groupsMode('all')
                                                ->itemsProperties(TRUE)
                                                ->tags(TRUE)
                        ->limit(1);

                  // добавляем в XML тег current_group_id

                    if (is_object(Core_Page::instance()->object)
                    && get_class(Core_Page::instance()->object) == 'Shop_Controller_Show')
                    {
                       $Shop_Controller_Show->addEntity(
                          Core::factory('Core_Xml_Entity')
                             ->name('current_group_id')
                             ->value(intval(Core_Page::instance()->object->group))
                       );
                    }

                    $Shop_Controller_Show->show();
                        }
                    ?>

243645879

XSL . МагазинГруппыТоваровСлева

<?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">
<ul class="sf-menu-phone2">
<xsl:apply-templates select="shop_group"/>
</ul>
</xsl:template>
<!-- Шаблон для групп товара -->
<xsl:template match="shop_group">
<xsl:variable name="group" select="/shop/current_group_id"/>
<xsl:variable name="parent_id" select="shop_group[@id=$group]/parent_id"/>
<li>
<xsl:choose>
<xsl:when test="shop_group and @id = $group">
<xsl:attribute name="class">parent current</xsl:attribute>
</xsl:when>
<xsl:when test="shop_group">
<xsl:attribute name="class">parent</xsl:attribute>
</xsl:when>
<xsl:when test="@id = $group">
<xsl:attribute name="class">current</xsl:attribute>
</xsl:when>
</xsl:choose>
<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:if test="shop_group">
<xsl:choose>
<xsl:when test="shop_group and @id = /shop/current_group_id">
<strong class="submenu-caret" onclick="$('#submenu_{@id}').toggle(); $(this).toggleClass('show')"></strong>
</xsl:when>
<xsl:otherwise>
<strong class="submenu-caret" onclick="$('#submenu_{@id}').toggle(); $(this).toggleClass('show')"></strong>
</xsl:otherwise>
</xsl:choose>
</xsl:if>
<!-- Если есть подгруппы -->
<xsl:if test="shop_group">
<ul id="submenu_{@id}" class="sub_menu" >
<xsl:if test="@id = $group or @id = $parent_id ">
<xsl:attribute name="class">sub_menu show</xsl:attribute>
</xsl:if>
<xsl:apply-templates select="shop_group"/>
</ul>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>

Стили CSS

/*===== MENU =====*/
.sf-menu-phone2 {padding: 20px 11px; font: 13px Roboto;}
.level0 > li > a{display:block;font: 13px Roboto;margin-right: 20px !important;padding:0 0 0 16px;position:relative;text-decoration:none;}
.sf-menu-phone2 li {list-style-type:none;}
.sf-menu-phone2 > li a {color:#2a2735; padding-left: 14px;position:relative; text-decoration: underline; display:block;}
.sf-menu-phone2 > li.active > a{color:#000}
.sf-menu-phone2 li {;position:relative;z-index:2}
.submenu-caret {color:#de5747}
.sf-menu-phone2 a:hover, .sf-menu-phone2 a.current-group {color: #ff9900; text-decoration: underline;}
.sf-menu-phone2 li strong:before {display: block;width: 10px; height: 9px; position: absolute;top: 3px;left: 0;content: ''; background: url(/images/cats_sub.png) 0 0 no-repeat;}
.sf-menu-phone2 li.current strong:before { background-position: 0 -9px;}
.sf-menu-phone2 li strong:hover{cursor:pointer}
.submenu-caret:hover, .sf-menu-phone2 > li:hover > strong, .sf-menu-phone2 > li.active > strong:before{color:#333}
.sf-menu-phone2 > li {margin-top: 15px;}
.sub_menu { padding: 10px 0 0 10px; display: none; position:relative; }
.sub_menu .show {display: block;}
.sub_menu .no-show {display: none;}
.sub_menu a {color:#000;text-decoration:none}
.sub_menu li {font:300 12px/22px Roboto;padding-left:8px; position:relative}
.sub_menu li + li {margin-top:2px}
.sub_menu li:before {background:#ddd;content:'';display:block;height:1px;left:12px;position:absolute;top:10px;width:5px}