вертикальное аккордеон меню
Andrey_Syrota
28 января 2015 г.
Здравствуйте, кто нибудь подскажите как доделать вертикальное аккордеон меню.
Нужно если есть подгруппы выводить стрелку, при ее нажатии раскрывать подгруппы, а при нажатии на название переходить в категорию при этом раскрывать подгруппы.
<?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>
<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>
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();
}
<!--Для левого меню -->
<script type="text/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
});
});
</script>
#blockGroups {
padding: 16px 0;
background: #4e4e4e;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#4e4e4e),color-stop(1,#5b5959));
background: -ms-linear-gradient(bottom,#4e4e4e,#5b5959);
background: -moz-linear-gradient(center bottom,#4e4e4e 0%,#5b5959 100%);
background: -o-linear-gradient(#5b5959,#4e4e4e);
overflow: hidden;
width: 100%;
-webkit-box-shadow: 0 0 5px #bbb;
-moz-box-shadow: 0 0 5px #bbb;
box-shadow: 0 0 5px #bbb;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
margin-top: 0;
}
#blockGroups .titleH1 {
background: none repeat scroll 0 0 transparent;
color: #ffffff;
font-family: "Quattrocento Sans",Arial;
font-size: 18px;
font-style: normal;
font-weight: bold;
line-height: 32px;
margin: 0;
min-height: 26px;
padding-bottom: 8px !important;
padding-top: 8px !important;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 1);
border-bottom: 1px solid #d6d6d6;
}
ul.blockGroupsList {
overflow: hidden;
position: relative;
}
ul.blockGroupsList li {
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: 13px;
line-height: 18px;
font-family: "Quattrocento Sans",Arial;
text-transform: none;
text-decoration: none;
color: #ffffff;
position: relative;
padding-left: 12px;
padding-top: 8px;
padding-bottom: 8px;
text-align: left;
}
ul.blockGroupsList li a:hover {
color: #4e4e4e;
font-style: normal;
font-weight: bold;
line-height: normal;
text-decoration: none;
text-shadow: 0 1px 2px rgba(255, 255, 255, 1);
background: none repeat scroll 0 0 rgba(228, 193, 27, 1);
}
ul.blockGroupsList li a.current {
font-style: normal;
font-weight: bold;
line-height: normal;
color: #4e4e4e;
text-shadow: 0 1px 2px rgba(255, 255, 255, 1);
background: none repeat scroll 0 0 rgba(228, 193, 27, 1);
}
ul.blockGroupsList li a span {
position: absolute;
top: 4px;
left: 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(/images/button-right.png) no-repeat 0 0;
height: 1px;
width: 23px;
display: block;
}
Вот оригиналhttp://hostcms.pro/blog/solution_v6/58.html
Нужно если есть подгруппы выводить стрелку, при ее нажатии раскрывать подгруппы, а при нажатии на название переходить в категорию при этом раскрывать подгруппы.
<?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>
<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>
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();
}
<!--Для левого меню -->
<script type="text/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
});
});
</script>
#blockGroups {
padding: 16px 0;
background: #4e4e4e;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#4e4e4e),color-stop(1,#5b5959));
background: -ms-linear-gradient(bottom,#4e4e4e,#5b5959);
background: -moz-linear-gradient(center bottom,#4e4e4e 0%,#5b5959 100%);
background: -o-linear-gradient(#5b5959,#4e4e4e);
overflow: hidden;
width: 100%;
-webkit-box-shadow: 0 0 5px #bbb;
-moz-box-shadow: 0 0 5px #bbb;
box-shadow: 0 0 5px #bbb;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
margin-top: 0;
}
#blockGroups .titleH1 {
background: none repeat scroll 0 0 transparent;
color: #ffffff;
font-family: "Quattrocento Sans",Arial;
font-size: 18px;
font-style: normal;
font-weight: bold;
line-height: 32px;
margin: 0;
min-height: 26px;
padding-bottom: 8px !important;
padding-top: 8px !important;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 1);
border-bottom: 1px solid #d6d6d6;
}
ul.blockGroupsList {
overflow: hidden;
position: relative;
}
ul.blockGroupsList li {
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: 13px;
line-height: 18px;
font-family: "Quattrocento Sans",Arial;
text-transform: none;
text-decoration: none;
color: #ffffff;
position: relative;
padding-left: 12px;
padding-top: 8px;
padding-bottom: 8px;
text-align: left;
}
ul.blockGroupsList li a:hover {
color: #4e4e4e;
font-style: normal;
font-weight: bold;
line-height: normal;
text-decoration: none;
text-shadow: 0 1px 2px rgba(255, 255, 255, 1);
background: none repeat scroll 0 0 rgba(228, 193, 27, 1);
}
ul.blockGroupsList li a.current {
font-style: normal;
font-weight: bold;
line-height: normal;
color: #4e4e4e;
text-shadow: 0 1px 2px rgba(255, 255, 255, 1);
background: none repeat scroll 0 0 rgba(228, 193, 27, 1);
}
ul.blockGroupsList li a span {
position: absolute;
top: 4px;
left: 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(/images/button-right.png) no-repeat 0 0;
height: 1px;
width: 23px;
display: block;
}
Вот оригинал
Авторизация