HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров

HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров

Создадим раздвижное меню для каталога товаров с несколькими уровнями вложенности разделов. Меню будет открыто в основных разделах, лежащих в корневом каталоге. Если у раздела есть вложенные группы товаров, то показываем "крестик". При открытии раздела "крестик" будет заменяться "тире". 

В принципе, вам нужно просто скопировать шаблон, CSS стили и пользоваться этим меню.

1. Создаете 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">
<div class="left-block-widget">
<h4 class="text-center">Каталог товаров</h4>

<div class="shop-group-menu">
<ul>
<xsl:apply-templates select="shop_group"/>
</ul>
</div>
</div>
</xsl:template>

<xsl:variable name="current_group_id" select="/shop/current_group_id"/>

<!-- Шаблон для групп товара -->
<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="sub_subgroup"/>
</ul>
</xsl:if>

</li>
</xsl:template>


<!-- Шаблон для групп товара -->
<xsl:template match="shop_group" mode="sub_subgroup>
<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}" style="display: none;">
<xsl:if test="@id = $current_group_id or .//shop_group/@id = $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="last_subgroup"/>
</ul>
</xsl:if>
</li>
</xsl:template>


<!-- Шаблон для групп товара -->
<xsl:template match="shop_group" mode="last_subgroup">
<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}" style="display: none;">
<xsl:if test="@id = $current_group_id or .//shop_group/@id = $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="last_subgroup"/>
</ul>
</xsl:if>

</li>
</xsl:template>

</xsl:stylesheet>

2. Далее во вкладке CSS загружаете стили для нашего меню:

/*===== ГРУППЫ ТОВАРОВ =====*/

.shop-group-menu ul {
   padding: 0;
   margin: 0;
}
.shop-group-menu ul li {
   border-bottom: 1px solid #d8d8d8;
   margin: 0;
   padding: 0;
   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: 5px 15px; display:block; position:relative; -moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear; } .shop-group-menu >ul >li >h6 {
background:#00c783;
color:#fff;
padding:8px 12px 8px 20px;
margin:10px -17px 4px;
} .shop-group-menu li a:hover {
background:#f2f2f2;
color: #000;
} .shop-group-menu li a.groups:after {
display: block;
content: "+";
font-size:15px;
position: absolute; top: 6px;
right: 2px; color: #00c783;
} .shop-group-menu li a.opened:after {
content: "-";
color: #109668;
} .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:#efefef;
} .shop-group-menu ul ul ul ul {
background:#e6e6e6;
}

3. В макет, который у вас подключен для показа Каталога товаров, добавляете php код вывода Меню:

<?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') ->limit(0);

// Чтобы знать текущую группу каталога, добавляем этот код 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();
} ?>

Если возникнут вопросы при интеграции этого меню, пишите в комментариях. На этом всё. Ниже вы найдете ссылки на другие интеграции для сайтов на движке HostCMS 6.

HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Другие статьи по теме:

HOSTCMS v.6. Ссылка на все товары производителя в карточке товара
HOSTCMS v.6. Ссылка на все товары производителя в карточке товара

Если нужно дать возможность покупателю выбрать товары текущего производителя, когда он находится в карточке товара, то вам пригодится данная небольшая доработка...

CSS в 2024 году: 17 функций, меняющих современный веб-дизайн
CSS в 2024 году: 17 функций, меняющих современный веб-дизайн

CSS 2024 демонстрирует 17 революционных обновлений, которые повышают эффективность веб-разработки благодаря расширенным возможностям компоновки, более плавной анимации и улучшенному взаимодействию с пользователем. Эти функции позволяют разработчикам создавать более динамичные, доступные и визуально привлекательные веб-сайты, чем когда-либо прежде.

HostCMS v.6. Вертикальное меню на jQuery
HostCMS v.6. Вертикальное меню на jQuery

Простой пример левого вертикального выпадающего меню для групп товаров интернет магазина. Простая установка и настройка...

2024 год стал еще одним удивительным годом для CSS!
2024 год стал еще одним удивительным годом для CSS!

Переходы между документами и анимация при прокрутке позволяют добавить больше интерактивности в ваши приложения с помощью нескольких строк CSS. Теперь вы можете анимировать height: auto;, стилизовать полосы прокрутки и изменять размер текстовых полей в соответствии с их содержимым.

Разные "вкусняшки" на CSS и HTML5 для начинающих вебдизайнеров
Разные "вкусняшки" на CSS и HTML5 для начинающих вебдизайнеров

Подборка различных проектов с открытым кодом на CSS и HTML, от бордеров до слайдера, которые могут вам пригодиться при создании веб сайта.

Как открыть интернет-магазин за 6 простых шагов
Как открыть интернет-магазин за 6 простых шагов

Создание интернет-магазина - это не только блестящая идея, вам также нужно правильно ее реализовать, чтобы увеличить охват. Сделаете это правильно, и вы увидите, как продажи начнут расти. Сделаете это неправильно, и у вас просто будет очень трудоемкое хобби.

Мы используем cookie-файлы, чтобы получить статистику, которая помогает нам обеспечивать вас лучшим контентом. Вы можете прочитать подробнее о cookie-файлах или изменить настройки браузера. Отключение cookie-файлов может привести к неполадкам в работе сайта. Продолжая пользоваться сайтом без изменения настроек, вы даете согласие на использование ваших cookie-файлов. Это совершенно безопасно!