Хаки и Скрипты Next Generation CMS : TWIG, Меню и навигация, CSS : Ставим вертикальное выпадающие меню на CSS

irbees2008 Опубликовано - 1 - мая TWIG

Адаптировал: 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.Все .Будут вопросы задавайте в комментах.

Вот две картинки ,если нужны , но можно просто все на стилях оформить.

А так их залить в папку images.

Можешь почитать и вот эту статейку "Палитра цветов 2"

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

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