Плюсы данного решения:
- Работает на mootools и не тянет за собой jquery или ченибудь подобное.
- Не подключает внешних файлов скриптов - в мутулзе уже встроен класс Accordion.
- Не требует установки новых модулей - все делается на уровне шаблона
Минусы я заметил такие:
- Проблема когда на сайте два и более модуля меню (можно решить).
- Немаленький размер кода инициализации - 40 строк кода.
Как сделать:
Создаем пустой текствый файл default.php в templates/your_template/html/mod_mainmenu/ . Если такой папки нет - создайте ее.
Вставляем туда
[spoiler title=вот это вот]
<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
if ( ! defined('modMainMenuXMLCallbackDefined') )
{
function modMainMenuXMLCallback(&$node, $args)
{
$user = &JFactory::getUser();
$menu = &JSite::getMenu();
$active = $menu->getActive();
$path = isset($active)? array_reverse($active->tree) : null;
if (($args['end']) && ($node->attributes('level') >= $args['end']))
{
$children = $node->children();
foreach ($node->children() as $child)
{
if ($child->name() == 'ul') {
$node->removeChild($child);
}
}
}
if ($node->name() == 'ul') {
foreach ($node->children() as $child)
{
if ($child->attributes('access') > $user->get('aid', 0)) {
$node->removeChild($child);
}
}
}
if (($node->name() == 'li') && isset($node->ul)) {
$node->addAttribute('class', 'parent');
}
if (isset($path) && (in_array($node->attributes('id'), $path) || in_array($node->attributes('rel'), $path)))
{
if ($node->attributes('class')) {
$node->addAttribute('class', $node->attributes('class').' active');
} else {
$node->addAttribute('class', 'active');
}
}
else
{
if (isset($args['children']) && !$args['children'])
{
$children = $node->children();
foreach ($node->children() as $child)
{
if ($child->name() == 'ul') {
$node->removeChild($child);
}
}
}
}
if (($node->name() == 'li') && ($id = $node->attributes('id'))) {
if ($node->attributes('class')) {
$node->addAttribute('class', $node->attributes('class').' item'.$id);
} else {
$node->addAttribute('class', 'item'.$id);
}
}
if (isset($path) && $node->attributes('id') == $path[0]) {
$node->addAttribute('id', 'current');
} else {
$node->removeAttribute('id');
}
$node->removeAttribute('rel');
$node->removeAttribute('level');
$node->removeAttribute('access');
}
define('modMainMenuXMLCallbackDefined', true);
}
$params->get('tag_id') or $params->set('accordion');
$script = "
window.addEvent('domready', function(){
$$($('{$params->get('tag_id')}'), $('{$params->get('tag_id')}').getElements('ul')).each(function(el){
accParentItems = el.getChildren().filterByClass('parent');
accTogglers = [];
accElements = [];
accParentItems.each(function(element, index){
accTogglers.push(new Element('span').injectTop(element));
accElements.push(element.getElementsByTagName('ul')[0]);
element.index = index;
element.addEvent('mouseover', function(){
if (this.getChildren().filterByTag('ul')[0].offsetHeight == 0) {
accTimer = this.parentNode.Accordion.display.delay(200, this.parentNode.Accordion, $(this).index);
}
});
element.addEvent('mouseout', function(){
if((accTimer != undefined)){clearTimeout(accTimer)};
});
});
if ( accParentItems.length > 0 ){
el.Accordion = new Accordion(accTogglers, accElements, {
opacity: false,
alwaysHide: true,
show: $$(accParentItems).indexOf($$(accParentItems).filterByClass('active')[0]),
duration: 200,
transition: Fx.Transitions.Quart.easeOut,
onActive: function(toggler, element){
element.parentNode.parentNode.setStyle('height', 'auto');
},
onBackground: function(toggler, element){
element.parentNode.parentNode.setStyle('height', 'auto');
element.setStyle('height', element.offsetHeight+'px');
}
}
);
}
});
});
";
// require mootools
JHTML::_('behavior.mootools');
$document = JFactory::getDocument();
$document->addScriptDeclaration($script);
modMainMenuHelper::render($params, 'modMainMenuXMLCallback');
[/spoiler]
если ктонить шарит в js и mootools, помогите упростить код:
[spoiler title="accordion js"]
window.addEvent('domready', function(){
$$($('{$params->get('tag_id')}'), $('{$params->get('tag_id')}').getElements('ul')).each(function(el){
accParentItems = el.getChildren().filterByClass('parent');
accTogglers = [];
accElements = [];
accParentItems.each(function(element, index){
accTogglers.push(new Element('span').injectTop(element));
accElements.push(element.getElementsByTagName('ul')[0]);
element.index = index;
element.addEvent('mouseover', function(){
if (this.getChildren().filterByTag('ul')[0].offsetHeight == 0) {
accTimer = this.parentNode.Accordion.display.delay(200, this.parentNode.Accordion, $(this).index);
}
});
element.addEvent('mouseout', function(){
if((accTimer != undefined)){clearTimeout(accTimer)};
});
});
if ( accParentItems.length > 0 ){
el.Accordion = new Accordion(accTogglers, accElements, {
opacity: false,
alwaysHide: true,
show: $$(accParentItems).indexOf($$(accParentItems).filterByClass('active')[0]),
duration: 200,
transition: Fx.Transitions.Quart.easeOut,
onActive: function(toggler, element){
element.parentNode.parentNode.setStyle('height', 'auto');
},
onBackground: function(toggler, element){
element.parentNode.parentNode.setStyle('height', 'auto');
element.setStyle('height', element.offsetHeight+'px');
}
}
);
}
});
});
[/spoiler]
22.01.2018, 13:17:45