Доброго времени суток всем!
можно сделать вертикальное меню с категориями вот так:
блок big_category_tree.tpl скриншот
Untitled-1.jpg 132.14К
93 Количество загрузок:
<ul id="navmenu-v">
{section name=h loop=$big_categories_tree}
{if $big_categories_tree[h].categoryID != 1}
{if $big_categories_tree[h].level > $oldnumber}<ul>{/if}
{if $big_categories_tree[h].level < $oldnumber}{section name=w loop=$oldnumber-$big_categories_tree[h].level}</ul>{/section}{/if}
{if $big_categories_tree[h].subcount > 0}
{if $categoryID != $big_categories_tree[h].categoryID}<li>{else}<li>{/if}{else}<li>{/if}
<a href="{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 $categoryID == $big_categories_tree[h].categoryID}class="bf"{/if}>{$big_categories_tree[h].name}</a>
{if $categoryID == $big_categories_tree[h].categoryID}
{/if}
{assign var="oldnumber" value=$big_categories_tree[h].level}
{assign var="oldcat" value=$big_categories_tree[h].categoryID}
{/if}
{/section}
</ul>
</div>
</div>
{else}
<div align="center">{$smarty.const.STRING_NO_CATEGORIES}</div>
{/if}
CSS
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 232px;
list-style: none;
}
ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
}
ul#navmenu-v a {
border: 1px solid #FFF;
border-bottom-color: #ccc;
padding: 0 6px;
display: block;
background: #d2d2d2;
color: #000;
font-family: Trebuchet MS;font-size: 16px;
text-decoration: none;
height: auto !important;
height: 1%;
}
ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
background: #d2d2d2;
color: #000;
}
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #d2d2d2;
color: #000;
}
ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #f7f8f9;
color: #000;
}
ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
background: #f7f8f9;
color: #000;
}
ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
background: #d2d2d2;
color: #000;
}
ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li a {
background: #d2d2d2;
color: #000;
}
ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
background: #648B43;
color: #FFF;
}
ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 230px;
}
ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}
ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}
правка для ослика:
<!--[if gte IE 5.5]>
<script language="JavaScript" src="data/ваш шаблон/menu.js" type="text/JavaScript"></script>
<![endif]-->
menu.rar 326байт
36 Количество загрузок:
Прикрепленные файлы
-
menu.rar 326байт
36 Количество загрузок:
3
