• 2050
  • 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

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

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

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element