10
{* шаблон блока развернутого дерева категорий *}
{if $big_categories_tree && $big_categories_tree_count>0}
{section name=h loop=$big_categories_tree}
{if $big_categories_tree[h].categoryID != 1}
{if $big_categories_tree[h.index].level lt $big_categories_tree[h.index_next].level}{* вывод категорий *}
- {if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}
{else} {* вывод подкатегорий или категорий без вложенности *}
- {if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}
{/if}
{if $big_categories_tree[h.index].level gt $big_categories_tree[h.index_next].level}
{/if}
{/if}
{/section}
{else}
{$smarty.const.STRING_NO_CATEGORIES}
{/if}
Вот пример меню, необходима подключенная библиотека JavaScript jQuery
{* шаблон блока развернутого дерева категорий *}
{if $big_categories_tree && $big_categories_tree_count>0}
{section name=h loop=$big_categories_tree}
{if $big_categories_tree[h].categoryID != 1}
{if $big_categories_tree[h.index].level lt $big_categories_tree[h.index_next].level}{* вывод категорий *}
- {if $big_categories_tree[h.index].level>=1}{/if}{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}{if $big_categories_tree[h.index].level<1}{/if}
{else} {* вывод подкатегорий или категорий без вложенности *}
- {if $big_categories_tree[h.index].level>0}{/if}{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}
{/if}
{if $big_categories_tree[h.index].level gt $big_categories_tree[h.index_next].level}
{/if}
{/if}
{/section}
{else}
{$smarty.const.STRING_NO_CATEGORIES}
{/if}
Стили:
#treeMenu {
width: 240px;
margin: -10px;
}
#treeMenu h2 {
color: #454545;
font: bold 16px 'Segoe UI',Helvetica,Arial,sans-serif;
margin-bottom: 12px;
}
#treeMenu ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#treeMenu ul li {
-moz-border-radius: 3px 3px 3px 3px;
background: url("treeTabBg.gif") repeat-x scroll 0 0 #F5F5F5;
background-color: #CCCCCC;
border: 1px solid #FFFFFF;
margin: 4px 0;
overflow: hidden;
}
#treeMenu ul li span {
background: url("treeSplit.png") no-repeat scroll 100% 0 transparent;
cursor: pointer;
display: inline-block;
float: right;
height: 30px;
width: 30px;
}
#treeMenu ul li a {
color: #4D5F6B;
display: inline-block;
float: left;
font-size: 13px;
padding: 9px 10px;
text-decoration: none;
width: 186px;
}
#treeMenu ul li a:hover {
color: #FFA200
}
#treeMenu ul li span.opened {
background-position: 100% -61px;
}
#treeMenu ul li div {
clear: both;
height: auto;
}
#treeMenu ul li li {
background: none repeat scroll 0 0 transparent;
border-color: #EEEEEE -moz-use-text-color #FFFFFF;
border-left: 0 none;
border-right: 0 none;
border-style: solid none;
border-width: 1px 0;
clear: both;
margin: 0;
padding-left: 10px;
}
#treeMenu ul li li a {
color: #626262;
float: left;
font-size: 12px;
padding: 5px 0;
width: auto;
}
#treeMenu ul li li a:hover {
color: #000000;
text-decoration: underline;
}
#treeMenu ul li li span {
background-position: -10px -263px;
cursor: default;
display: inline;
float: left;
height: 20px;
width: 15px;
}
#treeMenu ul li li span.closed {
background-position: -10px -131px;
cursor: pointer;
}
#treeMenu ul li li span.closed.opened {
background-position: -7px -197px;
}
#treeMenu ul li li li {
border: 0 none;
}
В архиве пример готового меню
[ATTACH]165.vB[/ATTACH]
Не считаю нужным усложнять код в несколько раз ради поддержки тупорылых браузеров.
