Помогите с wa_print_tree для меню по колонкам

Вот как они это сделали? Неужели в ручную? http://hoff.ru/

По wa_print_tree расписано вот здесь

Ну а дальше играемся выводом элементов и стилями.

В примере сайт на битриксе, а не wa. Это я к тому, что там wa_print_tree и не пахнет. А вот как они это сделали (да и не только они), всегда можно посмотреть вот так ;)

Я все это смотрел, проблема в том, как в этот массив, который выводит wa_print_tree, добавить элемент, который потом стилями сделать столбцом.

Самый простой вариант: в цикле выводить список категорий 1 уровня с вложенным списком подкатегорий (wa_print_tree).

Хотя можно обойтись и просто стилями с помощью параметров class и collapsible_class функции wa_print_tree.

Как обойтись стилями? У меня не получается. Сможешь сделать? Готов оплатить за рабочее решение.

Дмитрий, у меня есть только 1 первый вариант, писался под bootstrap3:

  <nav class="navbar navbar-default" id="header-footer">
    <div class="container">

      <div class="navbar-header">
        <div class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-footer .navbar-collapse">
          <span class="h6">[`Product categories`] </span>
          <button class="btn btn-success"><i class="fa fa-bars"></i></button>
        </div>
      </div>

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
        {foreach $wa->shop->categories(0, null, true) as $category}
          {if !empty($category.childs)}
            <li class="dropdown dropdown-{$theme_settings.navbar_catalog}">
              <a href="{$category.url}" class="dropdown-toggle" data-hover="dropdown" role="button">{$category.name}</a>

              {if $theme_settings.navbar_catalog == 'horizontal'}
                <div class="dropdown-menu">
                  <div class="container">
                    <div class="row">
                      {foreach $category.childs as $subcategory}
                        <div class="col-md-6 col-lg-4 level-2">
                          <a href="{$subcategory.url}">{$subcategory.name}</a>
                          {wa_print_tree tree=$subcategory.childs class='level-3' elem='<a href=":url">:name</a>'}
                        </div>
                        {if $subcategory@iteration is div by 4}<div class="clearfix visible-md-block"></div>{/if}
                        {if $subcategory@iteration is div by 6}<div class="clearfix visible-lg-block"></div>{/if}
                      {/foreach}
                    </div>
                  </div>
                </div>
              {else}
                {if $category@last}{$class = 'dropdown-menu dropdown-menu-right'}{else}{$class = 'dropdown-menu'}{/if}
                {wa_print_tree tree=$category.childs class=$class elem='<a href=":url">:name</a>'}
              {/if}
            </li>
          {else}
            <li><a href="{$category.url}" role="button">{$category.name}</a></li>
          {/if}
        {/foreach}
        </ul>
      </div>

    </div>
  </nav>

Для другого решения (не wa_print_tree) использовал как-то вот это решение.

Задаем через class класс ul и этому ul выставляем стили, которые по ссылке.

По идеи должно сработать.

Anton info@ravencode.ru, пока разбираюсь, вопрос, я так понял, мне нужно добавить в мой код вот этот элемент:

{if $subcategory@iteration is div by 4}<div class="clearfix visible-md-block"></div>{/if}
{if $subcategory@iteration is div by 6}<div class="clearfix visible-lg-block"></div>{/if}

Мое понимание то что ты предлагаешь на изображении:

 {* INLINE category navigation *}
                {foreach $categories as $cat}
                    {if count($cat.childs)}
                        <li class="collapsible">
                            <a href="{$cat.url}">{$cat.name}</a>
                            <div class="flyout">
                                <div class="container">
                                    {wa_print_tree tree=$cat.childs unfolded=true collapsible_class='collapsible' class="menu-v" elem ='<a href=":url" title=":name">:name</a>'  } 

Я так понимаю тут мне надо добавить условие с постановкой разных классов для div, если решать по твоему предложению, правильно? 

                                </div>
                            </div>                    
                        </li>
                    {else}
                        <li class="collapsible">
                            <a href="{$cat.url}">{$cat.name}</a>
                        </li>
                    {/if}
                {/foreach}

4 и 6 это кол-во блоков в строке, сделано с расчетом на 3 разрешения экрана. Советую ознакомится с bootstrap, он значительно упрощает процесс верстки.

Эх, не получается у меня пока не так не этак, намучаюсь я с этим меню еще. Где бы исполнителя найти и заказать )