Блог

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 для каталога товаров

Понравилась статья? Поделитесь

Вас может заинтересовать:

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

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

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

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

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

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

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

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

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

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

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

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

  • HOSTCMS v.6. Проверка вводимых данных при оформлении заказа

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

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

WEB ДИЗАЙН

Разработка дизайна сайта. Использование шаблонов для "быстрых" проектов.

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

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

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

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

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

Графический дизайн (разработка логотипа). Написание seo-текстов. Редизайн сайта. Замена CMS. Кодинг