Блог

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. Проверка вводимых данных при оформлении заказа

    В 6 версии разработчики убрали проверку вводимых данных в форму заказа на шаге заполнения адреса доставки. Предлагаю очень простое решение этой проблемы с использованием JavaScript. 

  • HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS

    Меню адаптированно к использованию на сайтах под администрированием редакции HostCMS v.5 для вывода элементов каталога товаров. В выпадающем меню также выводится изображение подгруппы.

  • Используем готовые шаблоны для сайтов

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

  • Представительство ATMOS

    интернет-магазин компрессорного оборудования на HostCMS

  • HOSTCMS v.6. Краткая корзина в модальном окне

    Предлагаю вариант показа отложенного товара и содержимого краткой корзины в модальном окне в момент, когда Пользователь откладывает товар для совершения покупки. Решение делалось на основе встроенного в HostCMS адаптивного шаблона с подключеной библиотекой Bootstrap...

  • Градиентная обводка блока на CSS

    Как сделать красивую градиентную обводку блока на одном только CSS? Для этого мы сделаем следующее:

    1. Создадим div.linear-gradient с градиентным фоном;

    2. Создадим внутренний блок div с небольшим отступом.

Наши услуги по созданию сайтов

Веб дизайн

Разработка дизайна и создание интернет-сайта.

Поддержка сайта

Поддержка работоспособности. Написание текстов и статей. Наполнение товарами.

Готовый дизайн

Готовые шаблоны интернет-магазинов и корпоративных сайтов на HostCMS.

Контекстная реклама

Настройка и ведение рекламной кампании в Директ