Дополнительный класс в Wayfinder?

Добрый день! На своем сайте я реализовал меню с помощью wayfinder, но не знаю теперь, как подключить к дополнительный класс. Что нужно сделать: в оригинальном html коде меню на пунктах, где есть подпункты, в конце добавляется

<em></em>

— каретка. Выглядит это вот так:

<li class="sub-menu sub-menu-1"><a href="index-2.html">Services<em></em></a>

В чанке &rowTpl я вывожу этот подпункт вот так:

<li class="sub-menu sub-menu-1 [[+wf.classnames]] "><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

Если просто добавить в чанке перед <\а> наши теги

<em></em>

, то каретки появляются, но, соответственно, сразу на всех пунктах меню.

Вопрос: как реализовать эту процедуру, чтобы каретка появлялась только на пунктах меню, имеющих наследников?

alexingloire

10 октября 2016, 13:52

1 364

Комментарии: 9

Евгений Webinmd

10 октября 2016, 17:24

есть пару вариантов:
1) у wayfinder есть параметр &parentClass — задавайте класс и к нему уже через псевдоэлементы рисуйте каретку
2) &parentRowTpl — отдельный чанк для родительских, там уже добавляйте что угодно
В документации всё это есть

alexingloire

10 октября 2016, 18:46

Спасибо за ответ!
У меня, получается, есть 2 типа кареток:
1) Стрелка вниз у родительских пунктов меню:

.navbar_ .nav > li > a em{display: inline-block; width: 8px; height: 5px; background: url(../images/marker0.png) left top no-repeat; position: relative; margin-left: 10px; margin-top: 18px; vertical-align: top;}

2) Стрелка вправо у меню 2 и 3 уровня:

.sub-menu li a em{display: inline-block; width: 5px; height: 9px; background: url(../images/marker1.png) left top no-repeat; position: absolute; right: 8px; top: 50%; margin-top: -5px;}
.sub-menu li a:hover em{}

Кроме &parentRowTpl и &parentClass наверное, нужен еще как-то способ, который будет отличать уровень вложенности меню и в соответствии с этим использовать нужный класс? Не понимаю, каким образом это сделать.

Евгений Webinmd

10 октября 2016, 18:48

&levelClass
ДА и просто можно ипользовать

ul>li>ul

и так далее, проблема решаема

alexingloire

10 октября 2016, 22:36

Перепробовал всякое, но ничего не получалось. &parentClass и &parentRowTpl — относится ко всем родительским сразу… Смешно, но я попробовал прямо в названии документа дописать нужные теги и все получилось :) Название осталось не тронутым и на результат не влияет)

Но все равно хотелось бы сделать «как нужно». Вы не могли бы оставить свой skype для консультации? Был бы очень признателен.

Евгений Webinmd

11 октября 2016, 11:26

а если заказчик удалит лишний тег? или придет seo «специалист» и скажет — а что это за левые теги у нас в заголовке?

[[Wayfinder?
&parentClass=`parent`
]]

css

.nav>.parent>a::after{
	content="";
	display: inline-block;
	width: 8px;
	height: 5px;
	background: url(../images/marker0.png) left top no-repeat;
	position: relative;
	margin-left: 10px;
	margin-top: 18px;
	vertical-align: top;
}

.nav>.parent .parent>a::after{
	content="";
	display: inline-block;
	width: 5px;
	height: 9px;
	background: url(../images/marker1.png) left top no-repeat;
	position: absolute;
	right: 8px;
	top: 50%;
	margin-top: -5px;
}

alexingloire

11 октября 2016, 13:05

Ну да, вы правы. Одно лишнее движение и все пропало (в прямом смысле). Спасибо еще раз за помощь! К сожалению, ничего не происходит, после того, как добавил классы и &parentClass

Евгений Webinmd

11 октября 2016, 13:08

в стилях опечатка
не

content="";

content:"";

Евгений Webinmd

11 октября 2016, 13:11

+ для третьего уровня у вас что-то не так в чанке, вы наверное используете прямое написание классов, если так, то добавьте туда и такой плейсхолдер

[[+wf.classnames]]

alexingloire

11 октября 2016, 13:47

Исправил стили и изменил [[+wf.classes]] на [[+wf.classnames]] в чанке для третьего уровня и все заработало! По итогу, теперь чанк выглядит так:

<li class="sub-menu sub-menu-2 [[+wf.classnames]]" ><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

Большое спасибо за помощь! :)

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.