Блог

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 для вывода элементов каталога товаров. В выпадающем меню также выводится изображение подгруппы.

  • Вертикальное выпадающее меню на jQuery для HostCMS

    Простое вертикальное меню с плавно выпадающим подменю для сайтов на HostCMS. Работает на jQuery…

  • HOSTCMS v.6. Полезные php коды

    Некоторые полезные php коды для вывода данных на странице сайта.

  • Эффект вращения с помощью CSS3

    CSS3 позволяет создавать разнообразные эффекты на сайтах без использования javascript и громоздкого flesh. Все последние версии современных браузеров позволяют использовать css3 в полном объеме. Если Вы считаете, что посетители вашего сайта люди прогрессивные и пользуются современными браузерами, которые постоянно обновляют, то Вы смело можете использовать новые технологоии и не заботиться о тех, кто все еще живет в прошлом веке и использует IE5…

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

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

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

WEB ДИЗАЙН

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

ПОДДЕРЖКА САЙТА

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

ШАБЛОНЫ САЙТОВ

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

ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ

Разработка логотипа. Редизайн сайта. Замена вашей CMS на HostCMS. Калькуляторы. Формы.