Для начала создадим отдельный модуль для нашего меню. Создаем файл шаблона, для примера mod_menu_accordeon.tpl, в папке вашего шаблона, папка modules, и кидаем туда следующий фрагмент текста:
<div>
<ul id="menu">
{if $cfg.show_home}
<li {if $menuid==1}class="selected"{/if}>
<a href="/" {if $menuid==1}class="selected"{/if}><span>{$LANG.PATH_HOME}</span></a>
</li>
{/if}
{foreach key=key item=item from=$items}
{if $item.allow_group == -1 || $item.allow_group == $user_group || $is_admin}
{if $item.published}
{if $item.parent_id != $hide_parent}
{if $item.NSLevel < $last_level}
{math equation="x - y" x=$last_level y=$item.NSLevel assign="tail"}
{section name=foo start=0 loop=$tail step=1}
</ul></li>
{/section}
{/if}
{if $item.NSRight - $item.NSLeft == 1}
<li {if $menuid==$item.id}class="selected"{/if}>
<a href="{$item.link}" target="{$item.target}" {if $menuid==$item.id}class="selected"{/if}><span>{$item.title}</span></a>
</li>
{else}
<li {if ($menuid==$item.id || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)) && $item.NSLevel<=1}class="selected"{/if}>
<a href="{$item.link}" target="{$item.target}" {if ($menuid==$item.id || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)) && $item.NSLevel<=1}class="selected"{/if}><span>{$item.title}</span></a>
<ul>
{/if}
{assign var="last_level" value=$item.NSLevel}
{/if}
{else}
{php}$this->_tpl_vars['hide_parent'] = $this->_tpl_vars['item']['id'];{/php}
{/if}
{/if}
{/foreach}
{section name=foo start=0 loop=$last_level step=1}
</ul></li>
{/section}
</ul>
</div>[/code]
В файл style.css в конце добавляем код:
ul#menu, ul#menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul#menu a {
display: block;
text-decoration: none;
}
ul#menu li {
margin-top: 1px;
margin-left: 1px;
}
ul#menu li a {
background: #333;
color: #fff;
padding: 0.5em;
}
ul#menu li a:hover {
background: #000;
}
ul#menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul#menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
ul#menu li ul li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul#menu li ul li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }[/code]
Далее в админке создаем новый модуль, назовем его, для примера, вертикальное меню, тип модуля ставим "Дубликат (новый)" и в поле скопировать модуль, ставим "Меню" и нажимаем создать модуль.
Переходим в настройки модулей, выбираем наш модуль вертикальное меню. Далее настроить модуль, делаем привязку меню, в поле шаблон вставляем название нашего ранее созданного шаблона mod_menu_accordeon.tpl
В файл template.php между тегами <body></body> добавляем кусочек скрипта:
<script type="text/javascript">
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
</script>[/code]
Спасибо за меню автора Юрика. design-programming
