Изменение меню с использованием дополнительных стилей
Здравствуйте вопрос по выводу меню в шаблоне 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>
вывод бокового меню (меню раздела/категории товаров) в файле
{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>
12 ответов
<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>
Лучше расскажите словами, чего вы хотите добиться. Почему вам недостаточно класса selected, который присваивается выбранной в данный момент ссылке (см. параметр selected для wa_print_tree)?
Здравствуйте! Спасибо за оперативность.
Задача привязать картинки к пунктам меню (сверху). Для этого нужно, чтобы каждый пункт меню имел свой class. Как это задать? Через верстку кода или в бекенде?
Или подскажите где прочитать документацию.
Кажется, для этого придётся отказаться от плагина {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
Михаил, благодарю за этот код!
Очень нужно было добавить класс для ссылок.
Работает отлично!
Дополню:
Надо эту строку на эту заменить
<a href="{$item.url}">{$item.name|escape}</a>
на
<a href="{$item.url}">{$item.name|escape:nofilter}</a>
Иначе вместо кавычек будет писать "e;
В итоге пришлось обращаться к этим элементам последовательно:
ul.menu-v li ul li ul li ......
как в случае присвоения стелей, так и при ссылках java скриптов.
не очень удобно, но работает.
Я смотрю разработчики прям горят желанием помочь с решением задач...
купил тут эту систему и меня тоже интересует стилизация меню.
Обратитесь в службу поддержки за расширенной консультацией о редактировании дизайна сайта.
Разработчики просто чудо (как и сам проект)
Техподдержка теперь консультирует только по вопросам оплаты!
В общем техподдержка теперь - это бухгалтерия.
А название поменять забыли "Запросы в техподдержку"
Чувствуется стиль и хватка.
Тщательнее надо, товарищи!
На основе вышеописанной функции от Михаила - скорректировал вывод меню с классом "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}Не удастся вывести доп страницы с других приложений...