3653
- 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>
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;
}Вот две картинки ,если нужны , но можно просто все на стилях оформить.
А так их залить в папку images.
Можешь почитать и вот эту статейку "Отступаем.......Bootstrap 4"
Это тоже интересно
05.02.13Выпадающее меню на CSS
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.