HOSTCMS v.6
МЕНЮ
Выводим в XSL МЕНЮ картинку структуры и делаем замену картинки при наведении (hover)
Создаем в структуре дополнительное свойство "Изображение"
<img onmouseover="this.src='{dir}{property_value[tag_name = 'img_structure_hover']/file}';" onmouseout="this.src='{dir}{property_value[tag_name = 'img_structure']/file}';" src="{dir}{property_value[tag_name = 'img_structure']/file}" alt="{name}" width="111" height="43" title="{name}" align="center"/>
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="/site">
<div id="menu">
<ul>
<!-- Выбираем узлы структуры первого уровня -->
<xsl:apply-templates select="structure[show=1]" />
</ul>
</div>
</xsl:template>
<!-- Запишем в константу ID структуры, данные для которой будут выводиться пользователю -->
<xsl:variable name="current_structure_id" select="/site/current_structure_id"/>
<xsl:template match="structure">
<li>
<!--
Выделяем текущую страницу добавлением к li класса current,
если это текущая страница, либо у нее есть ребенок с атрибутом id, равным текущей группе.
-->
<xsl:if test="position() = last()">
<xsl:attribute name="style">background-image: none</xsl:attribute>
</xsl:if>
<!-- Определяем адрес ссылки -->
<xsl:variable name="link">
<xsl:choose>
<!-- Если внешняя ссылка -->
<xsl:when test="url != ''">
<xsl:value-of disable-output-escaping="yes" select="url"/>
</xsl:when>
<!-- Иначе если внутренняя ссылка -->
<xsl:otherwise>
<xsl:value-of disable-output-escaping="yes" select="link"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<!-- Ссылка на пункт меню -->
<a href="{$link}" class="scroll">
<xsl:if test="$current_structure_id = @id or count(.//structure[@id=$current_structure_id]) = 1">
<xsl:attribute name="class">scroll active</xsl:attribute>
</xsl:if>
<img onmouseover="this.src='{dir}{property_value[tag_name = 'img_structure_hover']/file}';" onmouseout="this.src='{dir}{property_value[tag_name = 'img_structure']/file}';" src="{dir}{property_value[tag_name = 'img_structure']/file}" alt="{name}" width="111" height="43" title="{name}" align="center"/>
<span><xsl:value-of disable-output-escaping="yes" select="name"/></span>
</a>
</li>
</xsl:template>
</xsl:stylesheet>
Горизонтальное выпадающее меню
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="/site">
<ul class="menu">
<!-- Выбираем узлы структуры -->
<xsl:apply-templates select="child::*[show=1]"/>
</ul>
</xsl:template>
<!-- Запишем в константу ID структуры, данные для которой будут выводиться пользователю -->
<xsl:variable name="current_structure_id" select="/site/current_structure_id"/>
<xsl:template match="*">
<li>
<xsl:if test="current_structure_id = @id or count(.//structure[@id=$current_structure_id]) = 1">
<xsl:attribute name="class">current</xsl:attribute>
</xsl:if>
<xsl:if test="position() = last()">
<xsl:attribute name="style">background-image: none</xsl:attribute>
</xsl:if>
<!-- Показывать ссылку, или нет -->
<xsl:if test="show = 1">
<!-- Определяем адрес ссылки -->
<xsl:variable name="link">
<xsl:choose>
<!-- Если внешняя ссылка -->
<xsl:when test="url != ''">
<xsl:value-of disable-output-escaping="yes" select="url"/>
</xsl:when>
<!-- Иначе если внутренняя ссылка -->
<xsl:otherwise>
<xsl:value-of disable-output-escaping="yes" select="link"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<a href="{$link}"><xsl:value-of disable-output-escaping="yes" select="name"/></a>
</xsl:if>
<!-- Выбираем подузлы структуры -->
<xsl:if test="count(child::*[show=1]) > 0 and @id = 88">
<ul>
<!-- Выбираем узлы структуры -->
<xsl:apply-templates select="child::*[show=1]"/>
</ul>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>
Стили CSS
/* ===== MENU =====*/
nav{padding:4px 4px 4px;float:right;}
nav>div{background:url(/images/11.png) 0 0 repeat-x #ddd;}
ul.menu{margin:0 1px 0 0;display:inline-block;float:left;list-style:none; position:relative;}
ul.menu li {float:left;margin:0 1px 0 0;border-right:#ddd 1px solid; }
ul.menu li a {line-height:17px;color:#000;font-size:12px;text-decoration:none;text-transform:uppercase; display:block; padding:10px 10px;}
ul.menu li:hover, ul.menu li.current {background:#f60000; border:0;-moz-border-radius:4px;/*Firefox*/-webkit-border-radius:4px;/*Safari, Chrome*/border-radius:4px;}
ul.menu li.current a {color:#fff;}
ul.menu li.current li a {color:#000;}
ul.menu li.current li a:hover {color:#fff;}
ul.menu li a:hover, ul.menu li a.current {color:#FFF;}
ul.menu li.home-page a{color:#FFF;}
ul.menu li.home-page span{background:url(/images/12.png) 0 0 no-repeat;width:19px;height:19px;display:block;}
.menu li:hover > ul {opacity:1;visibility:visible;}
.menu ul {opacity:0;visibility:hidden; position:absolute;top:37px; width:180px; background:#fff; border: 1px solid #ccc; z-index:10000;-moz-box-shadow: 0px 6px 8px #1f1f1f;/*FF 3.5+*/ -webkit-box-shadow: 0px 6px 8px #1f1f1f;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=180, Color=#999)";/*IE 8*/ box-shadow: 0px 6px 8px #999; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=180, Color=#999);/*IE 5.5-7*/}
.menu ul li {width:100%; border-bottom:1px solid #ccc;}
.menu ul li a {padding:6px 14px;}
.menu li:hover{visibility:inherit;/* fixes IE7 'sticky bug' */ left:0;top:63px;/* match top ul list item height */z-index:99;}
/*==================*/
Раздвижное меню групп магазина
Выводим рекурсивно раздвижное меню групп магазина на jQuery в макет страницы, с передачей параметра в XML текущей группы.

1. В макете страницы выводим блок с кодом:
<div id="blockGroups">
<?php
if (Core::moduleIsActive('shop'))
{
$Shop_Controller_Show = new Shop_Controller_Show(
Core_Entity::factory('Shop', 1)
);
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
->xsl(
Core_Entity::factory('Xsl')->getByName('МагазинГруппыТоваровЛевоеМеню')
)
->groupsMode('all');
$Shop_Controller_Show->show();
}
?>
</div>
Меняете параметры в коде на свои:
1. «1» — ID магазина
2. «МагазинГруппыТоваровЛевоеМеню» — XSL шаблон вывода
3. XML тег вывода значения текущей группы current_group_id — можно поменять на свой, можно оставить
2. Создаём 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="titleH1">
<xsl:value-of disable-output-escaping="yes" select="name"/>
</div>
<ul class="blockGroupsList">
<xsl:apply-templates select="shop_group"/>
</ul>
</xsl:template>
<!-- Шаблон для групп товара -->
<xsl:template match="shop_group">
<xsl:variable name="current_group_id" select="/shop/current_group_id"/>
<li>
<xsl:variable name="li_class">
<xsl:if test="position() = last()"> last</xsl:if>
<xsl:if test="$current_group_id = @id or count(.//shop_group[@id=$current_group_id])=1"> current</xsl:if>
</xsl:variable>
<xsl:attribute name="class">
<xsl:value-of select="normalize-space($li_class)"/>
</xsl:attribute>
<a href="{url}">
<xsl:if test="$current_group_id = @id or count(.//shop_group[@id=$current_group_id])=1">
<xsl:attribute name="class">
<xsl:text>current</xsl:text>
</xsl:attribute>
</xsl:if>
<span></span><xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
<!-- Если есть подгруппы -->
<xsl:if test="shop_group">
<ul class="blockGroupsSubList">
<xsl:apply-templates select="shop_group"/>
</ul>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>
3. В head сайта подключаете библиотеку jQuery, по-умолчанию она в HostCMS подключена, имеет вид
<script type="text/javascript" src="/hostcmsfiles/jquery/jquery.js"></script>
4. Во вкладке Основного макета Javascript размешаем скрипт раскрывающегося меню:
(function ($) {
$.fn.liHarmonica = function (params) {
var p = $.extend({
currentClass: 'current',
onlyOne: true,
speed: 500
}, params);
return this.each(function () {
var
el = $(this).addClass('harmonica'),
linkItem = $('ul', el).prev('a');
el.children(':last').addClass('last');
$('ul', el).each(function () {
$(this).children(':last').addClass('last');
});
$('ul', el).prev('a').addClass('harFull');
el.find('.' + p.currentClass).parents('ul').show().prev('a').addClass(p.currentClass).addClass('harOpen');
el.find('.allways').parents('ul').addClass('allwaysParent').show().prev('a').addClass('harOpen').addClass('allwaysOpen');
linkItem.on('click', function () {
if ($(this).next('ul').is(':hidden')) {
$(this).addClass('harOpen');
} else {
$(this).removeClass('harOpen');
}
if (p.onlyOne) {
$(this).closest('ul').closest('ul').find('ul').not($(this).next('ul')).slideUp(p.speed).prev('a').removeClass('harOpen');
$(this).next('ul').slideToggle(p.speed);
} else {
$(this).next('ul').stop(true).slideToggle(p.speed);
}
return false;
});
});
};
})(jQuery);
/* Инициализация */
$(function () {
$('.blockGroupsList').liHarmonica({
onlyOne: true,
speed: 500
});
});
Стили CSS
#blockGroups {
background-color: #fff;
border-bottom: 5px solid #e3c229;
margin-bottom: 50px;
padding: 16px 30px;
}
#blockGroups .titleH1 {
padding-bottom: 8px;
margin-bottom: 10px;
border-bottom: 1px solid #d6d6d6;
white-space: nowrap;
}
ul.blockGroupsList {
}
ul.blockGroupsList li {
padding-bottom: 8px;
margin-bottom: 10px;
border-bottom: 1px solid #d6d6d6;
}
ul.blockGroupsList li.last {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
ul.blockGroupsList li a {
display: block;
font-size: 14px;
line-height: 18px;
font-family: 'pt_sansregular';
text-transform: uppercase;
text-decoration: none;
color: #1c1c1c;
position: relative;
padding-left: 12px;
}
ul.blockGroupsList li a:hover {
text-decoration: none;
color: #bfbfbf;
}
ul.blockGroupsList li a.current {
color: #bfbfbf;
}
ul.blockGroupsList li a span {
position: absolute;
top: 4px;
left: 0;
background: url(/templates/template1/images/blockGroupsListLink.png) no-repeat 0 0;
height: 7px;
width: 7px;
display: block;
}
ul.blockGroupsList li a:hover span {
background-position: 0 -7px;
}
ul.blockGroupsList li ul.blockGroupsSubList {
padding-top: 20px;
display: none;
}
ul.blockGroupsList li ul.blockGroupsSubList li {
padding: 10px 30px;
margin: 0 -30px;
border-bottom: none;
}
ul.blockGroupsList li ul.blockGroupsSubList li.current {
background-color: #ffdd40;
}
ul.blockGroupsList li ul.blockGroupsSubList li a {
text-transform: none;
position: relative;
padding-left: 33px;
}
ul.blockGroupsList li ul.blockGroupsSubList li a.current {
color: #1c1c1c;
}
ul.blockGroupsList li ul.blockGroupsSubList li a span {
position: absolute;
top: 8px;
left: 0;
background: url(/templates/template1/images/blockGroupsSubListLink.png) no-repeat 0 0;
height: 1px;
width: 23px;
display: block;
}
Разное
Добавляем класс current
<!--
Выделяем текущую страницу добавлением к li класса current,
если это текущая страница, либо у нее есть ребенок с атрибутом id, равным текущей группе.
-->
<xsl:if test="$current_structure_id = @id or count(.//structure[@id=$current_structure_id]) = 1">
<xsl:attribute name="class">current</xsl:attribute>
</xsl:if>
Выделяем стилем вывод текущей позиции
<!-- Определяем стиль вывода ссылки -->
<xsl:variable name="link_style">
<xsl:choose>
<!-- Выделяем текущую страницу жирным (если это текущая страница, либо у нее есть ребенок с ID, равным текущей) -->
<xsl:when test="current_structure_id=@id or count(.//structure[@id=$current_structure_id])=1">color: #fff</xsl:when>
<!-- Иначе обычный вывод с пустым стилем -->
<xsl:otherwise></xsl:otherwise>
</xsl:choose>
</xsl:variable>
Применяем стили к первому и последнему элементу меню
<li>
<xsl:choose>
<xsl:when test="show_link = 1">
<!-- Определяем адрес ссылки -->
<xsl:variable name="link">
<xsl:choose>
<!-- Если внешняя ссылка -->
<xsl:when test="is_external_link = 1">
<xsl:value-of disable-output-escaping="yes" select="external_link"/>
</xsl:when>
<!-- Иначе если внутренняя ссылка -->
<xsl:otherwise>
<xsl:value-of disable-output-escaping="yes" select="link"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<!-- Ссылка на пункт меню -->
<a href="{$link}" title="{name}">
<!--
Выделяем текущую страницу добавлением к li класса first-current, last-current или current
если это текущая страница, либо у нее есть ребенок с атрибутом id, равным текущей.
-->
<xsl:choose>
<xsl:when test="current_structure_id = @id or count(.//structure[@id=$current_structure_id]) = 1">
<xsl:choose>
<xsl:when test="position()=1"><xsl:attribute name="class">first-current</xsl:attribute></xsl:when>
<xsl:when test="position()=last()"><xsl:attribute name="class">last-current</xsl:attribute></xsl:when>
<xsl:otherwise><xsl:attribute name="class">current</xsl:attribute></xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:otherwise>
<xsl:choose>
<xsl:when test="position()=1"><xsl:attribute name="class">first</xsl:attribute></xsl:when>
<xsl:when test="position()=last()"><xsl:attribute name="class">last</xsl:attribute></xsl:when>
<xsl:otherwise></xsl:otherwise>
</xsl:choose>
</xsl:otherwise>
</xsl:choose>
<em><b><xsl:value-of disable-output-escaping="yes" select="name"/></b></em></a>
</xsl:when>
<!-- Если не показывать ссылку - выводим просто имя ссылки -->
<xsl:otherwise>
<em><b><xsl:value-of disable-output-escaping="yes" select="name"/></b></em>
</xsl:otherwise>
</xsl:choose>
</li>
Раскрывающееся вертикальное меню для каталога товаров
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>Каталог товаров</h4>
<div class="shop-group-menu">
<ul>
<xsl:apply-templates select="shop_group"/>
</ul>
</div>
</div>
</xsl:template>
<!-- Шаблон для групп товара -->
<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="subgroup1"/>
</ul>
</xsl:if>
</li>
</xsl:template>
<!-- Шаблон для групп товара -->
<xsl:template match="shop_group" mode="subgroup1">
<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}" class="level0" style="display: none;">
<xsl:if test=".//shop_group/@id = /shop/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="subgroup2"/>
</ul>
</xsl:if>
</li>
</xsl:template>
<!-- Шаблон для групп товара -->
<xsl:template match="shop_group" mode="subgroup2">
<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}" class="level0" style="display: none;">
<xsl:if test=".//shop_group/@id = /shop/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="subgroup2"/>
</ul>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>
Стили CSS
/* Группы магазина */
.shop-group-menu ul {
padding: 0;
margin: 0;
}
.shop-group-menu ul li {
border-bottom: 1px solid #dedede;
margin: 0;
padding: 0;
/*overflow: hidden;*/
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: 2px 15px;
display:block;
position:relative;
}
.shop-group-menu >ul >li >h6 {background:#00abaf; color:#fff; padding:8px 12px 8px 20px; margin:10px -15px 4px;}
.shop-group-menu li a:hover {background:#f2f2f2; color: @primary-color }
.shop-group-menu li a.groups:after {
display: block;
content: "+";
font-size:15px;
position: absolute;
top: 6px;
right: 2px;
color: #999;
}
.shop-group-menu li a.opened:after {
content: "-";
}
.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:#f2f2f2;}
.shop-group-menu ul ul ul ul {background:#eee;}
РАСКРЫВАЮЩЕЕСЯ ГОРИЗОНТАЛЬНОЕ МЕНЮ КАТАЛОГА ТОВАРОВ
Добавляем этот код в Макет, в место, где нужно вывести меню
<?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')
->itemsProperties(TRUE)
->tags(TRUE)
->limit(1);
// добавляем в XML тег current_group_id
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();
}
?>
243645879
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">
<ul class="sf-menu-phone2">
<xsl:apply-templates select="shop_group"/>
</ul>
</xsl:template>
<!-- Шаблон для групп товара -->
<xsl:template match="shop_group">
<xsl:variable name="group" select="/shop/current_group_id"/>
<xsl:variable name="parent_id" select="shop_group[@id=$group]/parent_id"/>
<li>
<xsl:choose>
<xsl:when test="shop_group and @id = $group">
<xsl:attribute name="class">parent current</xsl:attribute>
</xsl:when>
<xsl:when test="shop_group">
<xsl:attribute name="class">parent</xsl:attribute>
</xsl:when>
<xsl:when test="@id = $group">
<xsl:attribute name="class">current</xsl:attribute>
</xsl:when>
</xsl:choose>
<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:if test="shop_group">
<xsl:choose>
<xsl:when test="shop_group and @id = /shop/current_group_id">
<strong class="submenu-caret" onclick="$('#submenu_{@id}').toggle(); $(this).toggleClass('show')"></strong>
</xsl:when>
<xsl:otherwise>
<strong class="submenu-caret" onclick="$('#submenu_{@id}').toggle(); $(this).toggleClass('show')"></strong>
</xsl:otherwise>
</xsl:choose>
</xsl:if>
<!-- Если есть подгруппы -->
<xsl:if test="shop_group">
<ul id="submenu_{@id}" class="sub_menu" >
<xsl:if test="@id = $group or @id = $parent_id ">
<xsl:attribute name="class">sub_menu show</xsl:attribute>
</xsl:if>
<xsl:apply-templates select="shop_group"/>
</ul>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>
Стили CSS
/*===== MENU =====*/
.sf-menu-phone2 {padding: 20px 11px; font: 13px Roboto;}
.level0 > li > a{display:block;font: 13px Roboto;margin-right: 20px !important;padding:0 0 0 16px;position:relative;text-decoration:none;}
.sf-menu-phone2 li {list-style-type:none;}
.sf-menu-phone2 > li a {color:#2a2735; padding-left: 14px;position:relative; text-decoration: underline; display:block;}
.sf-menu-phone2 > li.active > a{color:#000}
.sf-menu-phone2 li {;position:relative;z-index:2}
.submenu-caret {color:#de5747}
.sf-menu-phone2 a:hover, .sf-menu-phone2 a.current-group {color: #ff9900; text-decoration: underline;}
.sf-menu-phone2 li strong:before {display: block;width: 10px; height: 9px; position: absolute;top: 3px;left: 0;content: ''; background: url(/images/cats_sub.png) 0 0 no-repeat;}
.sf-menu-phone2 li.current strong:before { background-position: 0 -9px;}
.sf-menu-phone2 li strong:hover{cursor:pointer}
.submenu-caret:hover, .sf-menu-phone2 > li:hover > strong, .sf-menu-phone2 > li.active > strong:before{color:#333}
.sf-menu-phone2 > li {margin-top: 15px;}
.sub_menu { padding: 10px 0 0 10px; display: none; position:relative; }
.sub_menu .show {display: block;}
.sub_menu .no-show {display: none;}
.sub_menu a {color:#000;text-decoration:none}
.sub_menu li {font:300 12px/22px Roboto;padding-left:8px; position:relative}
.sub_menu li + li {margin-top:2px}
.sub_menu li:before {background:#ddd;content:'';display:block;height:1px;left:12px;position:absolute;top:10px;width:5px}
РАСКРЫВАЮЩЕЕСЯ ГОРИЗОНТАЛЬНОЕ МЕНЮ КАТАЛОГА ТОВАРОВ
PHP . Код вывода в макете
<?php
// Menu
// Разделы магазина
$Shop_Controller_Show = new Shop_Controller_Show(
Core_Entity::factory('Shop', 3)
);
$Shop_Controller_Show
->xsl(
Core_Entity::factory('Xsl')->getByName('МагазинГруппыТоваровМенюСайт2')
)
->groupsMode('all')
//->group(0)
->groupsForbiddenTags(array('seo_title', 'seo_description', 'seo_keywords', 'description'))
->associatedItems(FALSE)
->bonuses(FALSE)
->cart(FALSE)
->comments(FALSE)
->comparing(FALSE)
->favorite(FALSE)
->filterShortcuts(FALSE)
->groupsProperties(FALSE)
->groupsPropertiesList(FALSE)
->itemsProperties(FALSE)
->itemsPropertiesList(FALSE)
->modifications(FALSE)
->modificationsList(FALSE)
->siteuser(FALSE)
->siteuserProperties(FALSE)
->specialprices(FALSE)
->tags(FALSE)
->taxes(FALSE)
->viewed(FALSE)
->votes(FALSE)
->warehousesItems(FALSE)
->limit(0)
->show();
?>
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"/>
<!-- Запишем в константу ID структуры, данные для которой будут выводиться пользователю -->
<xsl:variable name="current_structure_id" select="/site/current_structure_id"/>
<xsl:template match="/site">
<div class="mbr-navbar__column mbr-navbar__menu">
<nav class="mbr-navbar__menu-box mbr-navbar__menu-box--inline-right">
<div class="mbr-navbar__column">
<div class="container">
<ul class="nav nav-pills mbr-navbar__items mbr-buttons--freeze btn-decorator mbr-buttons--active">
<li class="mbr-navbar__item">
<a href="/" title="{name}" data-toggle="dropdown" class="dropdown-toggle" onclick="location.href = this.href"><i class="fa fa-home"></i></a>
<i class="fa fa-circle"></i>
</li>
<!-- Выбираем узлы структуры первого уровня -->
<xsl:apply-templates select="structure[show=1]" />
</ul>
</div>
</div>
</nav>
</div>
</xsl:template>
<xsl:template match="structure">
<li class="mbr-navbar__item">
<xsl:if test="structure[show=1] or informationsystem_group[show=1] or shop_group[show=1]">
<xsl:attribute name="class">dropdown</xsl:attribute>
</xsl:if>
<xsl:if test="structure[show=1] and position() = 1">
<xsl:attribute name="class">dropdown first</xsl:attribute>
</xsl:if>
<xsl:if test="structure[show=1] and position() = last()">
<xsl:attribute name="class">dropdown last</xsl:attribute>
</xsl:if>
<!-- Определяем адрес ссылки -->
<xsl:variable name="link">
<xsl:choose>
<!-- Если внешняя ссылка -->
<xsl:when test="url != ''">
<xsl:value-of disable-output-escaping="yes" select="url"/>
</xsl:when>
<!-- Иначе если внутренняя ссылка -->
<xsl:otherwise>
<xsl:value-of disable-output-escaping="yes" select="link"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<!-- Ссылка на пункт меню -->
<a href="{$link}" title="{name}" id="slide{@id}" class="mbr-buttons__link" onclick="location.href = this.href">
<xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
<xsl:if test="position() != last()">
<i class="fa fa-circle"></i>
</xsl:if>
<xsl:if test="structure[show=1]">
<ul class="dropdown-menu" id="menu1">
<xsl:apply-templates select="structure[show=1]" mode="submenu" />
</ul>
</xsl:if>
<xsl:if test="shop_group[show=1]">
<ul class="dropdown-menu">
<xsl:apply-templates select="shop_group" mode="group"/>
</ul>
</xsl:if>
<xsl:if test="informationsystem_group[show=1]">
<ul class="dropdown-menu">
<xsl:apply-templates select="informationsystem_group" mode="infogroup"/>
</ul>
</xsl:if>
</li>
</xsl:template>
<xsl:template match="structure" mode="submenu">
<li>
<xsl:if test="structure[show=1]">
<xsl:attribute name="class">dropdown</xsl:attribute>
</xsl:if>
<!-- Определяем адрес ссылки -->
<xsl:variable name="link">
<xsl:choose>
<!-- Если внешняя ссылка -->
<xsl:when test="url != ''">
<xsl:value-of disable-output-escaping="yes" select="url"/>
</xsl:when>
<!-- Иначе если внутренняя ссылка -->
<xsl:otherwise>
<xsl:value-of disable-output-escaping="yes" select="link"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<!-- Ссылка на пункт меню -->
<a href="{$link}" title="{name}" data-toggle="dropdown" class="dropdown-toggle" onclick="location.href = this.href">
<xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
<xsl:choose>
<xsl:when test="structure[show=1]">
<i class="fa fa-angle-double-right"></i>
</xsl:when>
<xsl:otherwise></xsl:otherwise>
</xsl:choose>
<xsl:if test="structure[show=1]">
<ul class="dropdown-menu sub-menu">
<xsl:apply-templates select="structure[show=1]" mode="sub-submenu" />
</ul>
</xsl:if>
</li>
</xsl:template>
<xsl:template match="shop_group" mode="group">
<li>
<xsl:if test="shop_group">
<xsl:attribute name="class">dropdown</xsl:attribute>
</xsl:if>
<!-- Определяем адрес ссылки -->
<xsl:variable name="link">
<xsl:choose>
<!-- Если внешняя ссылка -->
<xsl:when test="url != ''">
<xsl:value-of disable-output-escaping="yes" select="url"/>
</xsl:when>
<!-- Иначе если внутренняя ссылка -->
<xsl:otherwise>
<xsl:value-of disable-output-escaping="yes" select="link"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<!-- Ссылка на пункт меню -->
<a href="{$link}" title="{name}" data-toggle="dropdown" class="dropdown-toggle" onclick="location.href = this.href">
<xsl:value-of disable-output-escaping="yes" select="name"/>
<xsl:choose>
<xsl:when test="shop_group">
<i class="fa fa-angle-double-right"></i>
</xsl:when>
<xsl:otherwise></xsl:otherwise>
</xsl:choose>
</a>
<xsl:if test="shop_group">
<ul class="dropdown-menu sub-menu">
<xsl:apply-templates select="shop_group" mode="sub-group"/>
</ul>
</xsl:if>
</li>
</xsl:template>
<xsl:template match="shop_group" mode="sub-group">
<li>
<!-- Ссылка на пункт меню -->
<a href="{url}" title="{name}" data-toggle="dropdown" class="dropdown-toggle" onclick="location.href = this.href">
<xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
</li>
</xsl:template>
<xsl:template match="informationsystem_group" mode="infogroup">
<li>
<xsl:if test="informationsystem_group">
<xsl:attribute name="class">dropdown</xsl:attribute>
</xsl:if>
<!-- Определяем адрес ссылки -->
<xsl:variable name="link">
<xsl:choose>
<!-- Если внешняя ссылка -->
<xsl:when test="url != ''">
<xsl:value-of disable-output-escaping="yes" select="url"/>
</xsl:when>
<!-- Иначе если внутренняя ссылка -->
<xsl:otherwise>
<xsl:value-of disable-output-escaping="yes" select="link"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<!-- Ссылка на пункт меню -->
<a href="{$link}" title="{name}" data-toggle="dropdown" class="dropdown-toggle" onclick="location.href = this.href">
<xsl:value-of disable-output-escaping="yes" select="name"/>
<xsl:choose>
<xsl:when test="informationsystem_group">
<i class="fa fa-angle-double-right"></i>
</xsl:when>
<xsl:otherwise></xsl:otherwise>
</xsl:choose>
</a>
<xsl:if test="informationsystem_group">
<ul class="dropdown-menu sub-menu">
<xsl:apply-templates select="informationsystem_group" mode="sub-infogroup"/>
</ul>
</xsl:if>
</li>
</xsl:template>
<xsl:template match="informationsystem_group" mode="sub-infogroup">
<li>
<!-- Ссылка на пункт меню -->
<a href="{url}" title="{name}" data-toggle="dropdown" class="dropdown-toggle" onclick="location.href = this.href">
<xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
</li>
</xsl:template>
</xsl:stylesheet>