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

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

/ 29 марта 2018 г. / 6886 / Время чтения
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, CSS

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

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

Несколько полезных CSS-трюков для Front-end разработчиков
Несколько полезных CSS-трюков для Front-end разработчиков

Хотим поделиться с вами несколькими CSS трюками, которые вам точно пригодятся при создании сайтов. Они позволят вам без использования Javascript создать анимацию и эффекты.

19 марта 2022 / 4096
⤑
HOSTCMS v.6. Внедряем coin-slider
HOSTCMS v.6. Внедряем coin-slider

Coin-slider один из популярных слайдеров, который используется на сайтах. Чаще всего слайдеры используют на Главной странице, для придания ей динамики, привлечения внимания к «горячей» информации. В этой статье рассказывается, как внедрить этот слайдер XSL-шаблон сайта, разработанного на HostCMS.

6 июля 2013 / 6786
⤑
HOSTCMS v.6. Внедрение в макет кода формы с reCaptcha
HOSTCMS v.6. Внедрение в макет кода формы с reCaptcha

Хочу поделиться с вами кодом, который размещается в макете страницы и подгружает в нее форму с reCaptcha...

28 декабря 2017 / 6239
⤑
Свойство clip-path
Свойство clip-path
Свойство clip-path в CSS позволяет указать конкретную область элемента для отображения, а остальная часть скрыта (или “обрезана”)...
7 апреля 2023 / 1749
⤑
Понимание HTML5 и CSS3 для веб-дизайна
Понимание HTML5 и CSS3 для веб-дизайна

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

5 марта 2022 / 2178
⤑
Устаревший HTML код
Устаревший HTML код

HTML является одним из основополагающих строительных блоков Интернета. Но так же, как и методы веб-дизайна меняются со временем, также меняется и код, который мы используем. По мере развития HTML какая-то часть его старой разметки устарела, а какая-то была перепрофилирована...

4 марта 2022 / 2151
⤑

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