Дополнительный класс в 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 467

Комментарии: 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>

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

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

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

Job Piper собирает IT заказы со всего Интернета.

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