Хаки и Скрипты Next Generation CMS

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

irbees2008 irbees2008 Опубликовано - 1 - мая TWIG
2668 - 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.

Можешь почитать и вот эту статейку "Фон для каждой категории "

Опрос

Ваше мнение

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

Последние комментарии

Теги

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

Статистика

  • Caйту: 3402 дня
  • Новостей: 549
  • Комменты: 254
  • Зарегистрированно : 577
  • Онлайн всего: [6]
  • Гости: [6]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 30
  • Генерация страницы: 0.147сек
  • Потребление памяти: 4.954 Mb 
  •   яндекс.ћетрика