Ставим вертикальное выпадающие меню на CSS

На форуме часто встречаются вопросы типа «как создать меню автоматом» или » плагин для менюшек есть?».Есть и плагины, можно выводить и средствами движка,о последнем я сейчас и расскажу и опишу.
С переходом на новый шаблонизатор ,появилась возможность вывода категорий и подкатегорий в древовидном виде, а чтобы скрыть подкатегории достаточно добавить стили или скрипт, и получается и отличное меню категорий.
Итак приступим
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.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

семнадцать − восемь =