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

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

irbees2008 irbees2008 Опубликовано - 1 - мая TWIG
2573 - 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йту: 3302 дня
  • Новостей: 539
  • Комменты: 252
  • Зарегистрированно : 569
  • Онлайн всего: [5]
  • Гости: [5]
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 30
  • Генерация страницы: 0.178сек
  • Потребление памяти: 4.934 Mb 
  •   яндекс.ћетрика