Вертикальное меню Аккордеон InstantCms

Опубликовано:
Просмотров: 3023
+3
Голосов: 3

Для начала создадим отдельный модуль для нашего меню. Создаем файл шаблона, для примера 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

Комментарии (0)

Нет комментариев. Ваш будет первым!

Голосуем

Самый нужный компонент