Как сделать 3х уровневое меню c разными стилями через PdoResources и PdoMenu в MODX?

Question

[Cal_Lightman]

Есть вот такое меню.

Скрин:

Хочу сделать его автоматизацию в MODX.
В меню 1-го уровня: 1-ая ссылка (Главная) и 2-ая ссылка (сам Каталог) имеют свои стили.
В меню второго уровня: стили Родителя 2-го уровня отличаются от стилей Родителя 1-го уровня.
Сам пункты 2-го, 3-го уровня тоже отличны от пунктов 1-го уровня меню.

<ul>
				<li><a href="" class="menu_icon_1"><span class="home"></span><i>Главная</i></a></li>
				<li class="parent catalog-dropdown">
					<a href="" class="menu_icon_2"><span class="hamburger hamburger-animate"><span></span><span></span><span></span></span>Каталог</a>

					<ul class="sub_menu">
						<li><a href="">Товар номер - 1</a></li>
						<li class="parent">
							<a href="">Товар номер - 2</a>
							<ul class="sub_sub_menu">
								<li><a href="">Товар номер - 2.1</a></li>
								<li><a href="">Товар номер - 2.2</a></li>
								<li><a href="">Товар номер - 2.3</a></li>
							</ul>
						</li>
						<li><a href="">Товар номер - 3</a></li>
						<li><a href="">Товар номер - 4</a></li>
						<li class="parent">
							<a href="">Товар номер - 5</a>
							<ul class="sub_sub_menu">
								<li><a href="#">Товар номер - 5.1</a></li>
								<li><a href="#">Товар номер - 5.2</a></li>
								<li><a href="#">Товар номер - 5.3</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="">Контакты</a></li>
				<li><a href="">О нас</a></li>
				<li class="is-active"><a href="">Цены</a></li>
				<li><a href="">Доставка</a></li>
				<li><a href="">Оплата</a></li>
			</ul>

Как правильно реализовать такую конструкцию через PdoResources?

[[pdoResources?
...
]]

[[pdoMenu?
...
]]

Я так понимаю, что через PdoMenu с различными стилями реализовать вряд-ли выйдет.

Comments

[Froggyweb]

PDOMenu норм. В принципе можно указать только уровень вложенности дальше CSS. Если верстка готова, то смотреть классы оберток уровня.
например tplParentRow

Answer 1

[Артур Ш]

А причём тут modx? У вас даже вопрос про стили. Можно же написать такой селектор .sub_menu .sub_menu li

Comments

[Cal_Lightman]

Вопрос не о стилях. С разными стилями через pdomenu не получается сделать меню. Потому что там разные стили у родителей...
Отсюда вопрос как это реализовать в modx через pdoresources к примеру.
Может как-то по уровням отдельно прописывать...

[Артур Ш]

Какая разница какие стили у родителей? Почитайте про css селекторы, много нового узнаете.

Answer 2

[Danny Arty]

Стили в CSS задаете просто через уровень вложенности. В чем проблема то?
Почитайте про дочерний селектор

Comments

[Cal_Lightman]

Не пойму, причем тут стили? Меню стилизованное. Мне нужно прописать его через

[[pdoResources?
...
]]

или

[[pdoMenu?
...
]]

Но у меня не получается. Не знаю как правильно это сделать.

[Danny Arty]

Cal_Lightman,

Не пойму, причем тут стили? Меню стилизованное. Мне нужно прописать его через

так же я не пойму в чем тут сложность? есть документация pdoMenu в которой подробно все написано

дык это обычный вызов трехуровневого меню

[[pdoMenu?
    &parents=`0`
    &level=`3`
    &parentClass=`parent`
    &firstClass=`ваш класс`
]]

ну и свои тплки сделаете. стилизацию второго пункта сделаете через second-child в css. опять же в чем проблема?

[Cal_Lightman]

Danny Arty,
Я не могу понять как это записать полностью в виде:
[[pdoMenu?
&parents=`0`
&level=`3`
&parentClass=`parent`
&firstClass=`ваш класс`
]]
Чтобы было всё меню.
Поскольку сам себе пытаюсь сделать сайт.
Документацию читал, но с разными стилями не понимаю как будет выглядеть вся запись.
Не догоняю до конца...

[Cal_Lightman]

Danny Arty,
У меня например в 1-ой ссылке (Главная) там не только Класс прописан.... Поэтому через parentClass наверно нельзя записать... Ровно как и класс Каталога. Таи и класс и еще spanЫ и прочее....

Не понимаю я в общем...

[Danny Arty]

Cal_Lightman, у вас какая основная задача? Вывести меню в таком стиле с помощью pdoMenu или запихать эти классы в меню, выведенное с помощью pdoMemu? Если второе - то успехов вам в реализации вашей странной задачи. Если все таки первое, то ваши классы тут особой роли то не играют. Просто выведите меню 3-уровневое и задавайте стили с помощью CSS для каждого уровня (1, 2 и 3) используя дочерний селектор. Для первого пункта меню задайте класс с помощью firstClass и стилизуйте с помощью CSS, а для каталога можете задать стиль используя псевдокласс CSS nth-child. В документации pdoMenu все более чем понятно расписано. Тем более если делаете для себя, почему бы просто не попробовать вывести? А дальше, если CSS знаете, разобраться вообще не проблема

[Cal_Lightman]

Danny Arty,
Первый пункт меню (Главная) через firstClass сам класс можно написать, а вот дальше не напишешь..

<li><a href="" class="menu_icon_1"><span class="home"></span><i>Главная</i></a></li>

А каталог выглядит так:

<li class="parent catalog-dropdown"><a href="" class="menu_icon_2"><span class="hamburger hamburger-animate"><span></span><span></span><span></span></span>Каталог</a>

<ul class="sub_menu">
...
</ul>

</li>

А потом еще внутренний li -родитель тоже...
я не понимаю как всё это будет выглядеть в pdomenu

[Danny Arty]

Cal_Lightman, просто выведите 3 уровневое меню с помощью pdoMenu. Потом изучайте CSS и стилизуйте под ваш макет