Изменение меню с использованием дополнительных стилей

Здравствуйте вопрос по выводу меню в шаблоне default
вывод бокового меню (меню раздела/категории товаров) в файле

{wa_print_tree tree=$wa->site->pages() attrs = 'id="page-list"' class="menu-v" elem =':name' selected=$page.id}

на выходе получаем

<ul class="menu-v menu-v" id="page-list">
<li>link1</li>
<li>link2
<ul class="menu-v"><li>sublink1</li></ul>
</li>
</ul>

Подскажите где в документации почитать или как изменить вывод меню с использованием дополнительных стилей для дочерних элементов меню и активного элемента, чтобы получилось примерно так

<ul class="nav-custom">
<li class="active">link1</li> (активная ссылка)
<li>link2</li>
<ul class="nav-custom2"><li>sublink1
</li>
</ul>

</ul>

6 ответов

  • 1

    Разработчики просто чудо (как и сам проект)

    Техподдержка теперь консультирует только по вопросам оплаты!

    В общем техподдержка теперь - это бухгалтерия.

    А название поменять забыли "Запросы в техподдержку"

    Чувствуется стиль и хватка.

    Тщательнее надо, товарищи!

  • 1
    GENIY9 6 января 2017 12:40 #

    На основе вышеописанной функции от Михаила - скорректировал вывод меню с классом "collapsible" для тех кому нужно горизонтальное меню с выпадающим подменю при наведении:

    {function tree}
        {foreach $items as $item}
            <li class="{if $item.id == $page.id|default:0}selected{elseif $item.childs}collapsible{/if}">
                <a href="{$item.url}">{$item.name|escape}</a>
                {if !empty($item.childs)}
                    <ul class="menu-v">{tree items=$item.childs}</ul>
                {/if}
            </li>
        {/foreach}
    {/function}
    
    <div class="app-navigation" role="navigation">
        <ul class="menu-h dropdown" id="page-list">
            <li><a href="/page-1">Страница 1</a></li> {* можно добавить доп страницы с других поселений*}
            {tree items=$wa->site->pages()}
            <li><a href="/page-9">Страница 9</a></li> {* еще страницы... *}
        </ul>
    </div>

    Актуально для темы default 3.0
    Для тех кому нужно вывести страницы с приложения САЙТ и к тому же добавить вручную страницы с других поселений.

    Так как с помощью этого плагина:

    {$site_pages = $wa->site->pages()}
    {wa_print_tree tree=$site_pages class="menu-h dropdown" attrs = 'id="page-list"' elem ='<a href=":url">:name</a>' collapsible_class='collapsible' selected=$site_pages.id|default:0}

    Не удастся вывести доп страницы с других приложений...

  • 0
    ошибочка, на выходе так
    <ul class="nav-custom">
    <li class="active"><a href="#">link1</a></li> (активная ссылка)
    <li><a href="#">link2</a>
    <ul class="nav-custom2"><li><a href="#">sublink1</a>
    </li>
    </ul>

    </ul>
    • +2
      Михаил Ушенин Михаил Ушенин Webasyst 19 апреля 2015 16:54 #

      Лучше расскажите словами, чего вы хотите добиться. Почему вам недостаточно класса selected, который присваивается выбранной в данный момент ссылке (см. параметр selected для wa_print_tree)?

      • +1
        Виталий Виталий 19 апреля 2015 17:54 #

        Здравствуйте! Спасибо за оперативность.

        Задача привязать картинки к пунктам меню (сверху). Для этого нужно, чтобы каждый пункт меню имел свой class. Как это задать? Через верстку кода или в бекенде?

        Или подскажите где прочитать документацию.

        • +2
          Михаил Ушенин Михаил Ушенин Webasyst 20 апреля 2015 03:27 #

          Кажется, для этого придётся отказаться от плагина {wa_print_tree}, потому что я не вижу в нём возможности указывать имя класса для элементов li. Чтобы добавлять произвольные имена классов элементам li, можно реализовать формирование дерева категорий с помощью рекурсивной функции в Smarty:

          {function tree}

          <ul>

          {foreach $items as $item}

          {$classes = []}

          {if ifempty($item.class)}{$classes[] = $item.class}{/if}

          {if $item.id == $page.id|default:null}{$classes[] = 'selected'}{/if}

          <li{if $classes} class="{implode(' ', $classes)}"{/if}>

          <a href="{$item.url}">{$item.name|escape}</a>

          {if ifempty($item.childs)}

          {tree items=$item.childs}

          {/if}

          </li>

          {/foreach}

          </ul>

          {/function}

          <div class="pages">{tree items=$wa->site->pages()}</div>

          И в свойствах страниц в поле для ввода доп. параметров укажите желаемое имя класса для каждой страницы вот в таком виде:

          class=enter-any-class-here

          • +1
            Артем Лузин Артем Лузин 16 мая 2018 13:29 #

            Михаил, благодарю за этот код!

            Очень нужно было добавить класс для ссылок.
            Работает отлично!

          • +1
            Арт Арт 17 августа 2019 13:04 #

            Дополню:

            Надо эту строку на эту заменить

            <a href="{$item.url}">{$item.name|escape}</a>

            на

            <a href="{$item.url}">{$item.name|escape:nofilter}</a>

            Иначе вместо кавычек будет писать &quote;

  • 0
    ledniy 5 декабря 2013 09:13 #
    menu-v это стандартный класс, и я даже не смог его найти по поиску в файлах. поэтому скажите хотябы как добавить класс к li и дочернему элементу UL
  • 0
    Павел Гордовой 3 января 2014 14:19 #
    тоже бадался с этой задачей.
    В итоге пришлось обращаться к этим элементам последовательно:
    ul.menu-v li ul li ul li ......
    как в случае присвоения стелей, так и при ссылках java скриптов.
    не очень удобно, но работает.
  • 0
    Виталий 19 апреля 2015 14:32 #

    Я смотрю разработчики прям горят желанием помочь с решением задач...

    купил тут эту систему и меня тоже интересует стилизация меню.

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите