• 1490
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

На форуме часто встречаются вопросы типа "как создать меню автоматом" или " плагин для менюшек есть?".Есть и плагины, можно выводить и средствами движка,о последнем я сейчас и расскажу и опишу.
С переходом на новый шаблонизатор ,появилась возможность вывода категорий и подкатегорий в древовидном виде, а чтобы скрыть подкатегории достаточно добавить стили или скрипт, и получается и отличное меню категорий.
Итак приступим
1.Открываем файл news.categories.tpl и редактируем так

Код:
<ul  class="drop_vert_menu">
{% for entry in entries %}
<li><a href="{{ entry.link }}">{{ entry.cat }}</a>
<!-- Если у категории есть подкатегории, то открываем новый уровень вложенности -->
{% if (entry.flags.hasChildren) %}
<ul>
{% else %}
</li>
{% if isSet(entry.closeToLevel) and entry.level > 0 %}
<!-- Если после этой категории закрывается 1 или несколько уровней - выводим закрывающиеся </ul> -->
{% for i in (entry.closeToLevel+1) .. entry.level %}
</ul></li>
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
</ul>
Здесь мы добавили класс class="drop_vert_menu" к которому и привяжем стили
2.Теперь в файл стилей шаблона добавим стили меню
Код:
.drop_vert_menu {
list-style-type: none;
width: 198px;
margin: 0;
padding: 0;
}

.drop_vert_menu ul {
list-style-type: none;
width: 180px;
margin: 0;
padding: 0;
}
.drop_vert_menu > li{
position: relative;
background: url(../images/vert_css_menu_0.png) no-repeat 0 0;
padding:10px 0px 10px 16px;
border-top: 1px solid White;
}

.drop_vert_menu > li:hover {
background: url(../images/vert_css_menu_1.png) no-repeat 0 0;
}
.drop_vert_menu > li > a{
font-size:18px;
color: White;
text-decoration:none;
}

.drop_vert_menu li ul {
position: absolute;
display: none;
top: 2px;
left: 195px;
}

.drop_vert_menu li:hover ul {
display: block;
}

.drop_vert_menu li ul li{
text-align:left;
background: #59C113;
padding: 8px 0px 8px 10px;
}

.drop_vert_menu li ul li:hover {
background: #87DA50;

}

.drop_vert_menu li ul li a{
font-size:14px;
color:White;
text-decoration:none;
}

.drop_vert_menu li ul li a:hover{
font-size: 14px;
color: White;
text-decoration:none;
}
3.Все .Будут вопросы задавайте в комментах.

Вот две картинки ,если нужны , но можно просто все на стилях оформить.
vert_css_menu_1.png (514 b)vert_css_menu_0.png (510 b)
А так их залить в папку images.

Можешь почитать и вот эту статейку "Закрываем часть страницы от индексации"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

какой форум лучше для вас
Результаты

----