Сложное меню

Здравствуйте. Прошу помощи по организации менюхи. Раньше мне такие сложные не попадались, поэтому решил спросить. В доках нет примеров использования всех параметров-шаблонов, поэтому разобраться не смог. Не понятно что тут tplParentRow, tplInner, tplInnerRow, запутался уже в их комбинациях.
Выглядит это примерно так:


Далее часть его HTML-структуры.
<ul class="super_menu">

	<li><a>Магазин</a>
		<div class="submenu cols_box">
			<ul class="cols_6">
				<li><a>Корзина</a>
					<ul>
						<li><a href="cart_1.html">Тип_1</a></li>
						<li><a href="cart_2.html">Тип_2</a></li>
					</ul>
				</li>
				<li><a href="wishlist.html">Мои желания</a></li>
				<li><a href="account.html">Мой аккаунт</a></li>
				<li><a href="checkout.html">Заказы</a></li>
				<li><a>Категории</a>
					<ul>
						<li><a href="categories1.html">Категория 1</a></li>
						<li><a href="categories2.html">Категория 2</a></li>
						<li><a href="categories3.html">Категория 3</a></li>
					</ul>
				</li>
			</ul>
			<ul class="cols_6">
				<li><a>Товары</a>
					<ul>
						<li><a href="1_1.html">Товар 1</a></li>
						<li><a href="1_2.html">Товар 2</a></li>
						<li><a href="1_3.html">Товар 3</a></li>
					</ul>
				</li>
				<li><a>Сравнение</a>
					<ul>
						<li><a href="1.html">Сравнение 1</a></li>
						<li><a href="2.html">Сравнение 2</a></li>
						<li><a href="3.html">Сравнение 3</a></li>
					</ul>
				</li>
				<li><a href="advanced.html">Расширеный поиск</a></li>
			</ul>
		</div>
	</li>
	
	<li><a>Страницы</a>
		<div class="submenu cols_box">
			<ul class="cols_6">
				<li><a href="blog_timeline.html">Лента</a></li>
				<li><a>Team</a>
					<ul>
						<li><a href="team_1.html">Запись 1</a></li>
						<li><a href="team_2.html">Запись 2</a></li>
					</ul>
				</li>
				<li><a href="portfolio_8.html">Портфолио</a>
					<ul>
						<li><a href="portfolio_1.html">Портфолио 1</a></li>
						<li><a href="portfolio_2.html">Портфолио 2</a></li>
						<li><a href="portfolio_3.html">Портфолио 3</a></li>
					</ul>
				</li>
				<li><a>Форум</>
					<ul>
						<li><a href="forum_1.html">Пост 1</a></li>
						<li><a href="forum_2.html">Пост 2</a></li>
						<li><a href="forum_3.html">Пост 3</a></li>
					</ul>
				</li>
			</ul>
			<ul class="cols_6">
				<li><a>Вход</a>
					<ul>
						<li><a href="login_1.html">Вход_1</a></li>
						<li><a href="login_2.html">Вход_2</a></li>
						<li><a href="login_3.html">Вход_3</a></li>
						<li><a href="login_4.html">Вход_4</a></li>
						<li><a href="login_5.html">Вход_5</a></li>
						<li><a href="login_6.html">Вход_6</a></li>
					</ul>
				</li>
				<li><a href="register_account.html">Регистрация</a></li>
				<li><a>Brands</a>
					<ul>
						<li><a href="all_brands_1.html">all_brands_1</a></li>
						<li><a href="all_brands_2.html">all_brands_2</a></li>
						<li><a href="single_brand.html">single_brand</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
	
	<li><a>Статьи</a>
		<div class="submenu cols_box">
			<ul class="cols_6">
				<li><a href="blog_5.html">Блог</a>
					<ul>
						<li><a href="blog_1.html">Блог_1</a></li>
						<li><a href="blog_2.html">Блог_2</a></li>
						<li><a href="blog_3.html">Блог_3</a></li>
					</ul>
				</li>
				<li><a>Статьи</a>
					<ul>
						<li><a href="articles_1.html">Раздел_1</a></li>
						<li><a href="articles_2.html">Раздел_2</a></li>
					</ul>
				</li>
				<li><a href="articles_expert_page.html">Обзор эксперта</a></li>
				<li><a href="blog_single_post_2.html">Single Post</a>
					<ul>
						<li><a href="single_post_1.html">single_post_1</a></li>
						<li><a href="ingle_post_2.html">single_post_2</a></li>
						<li><a href="single_post_3.html">single_post_3</a></li>
					</ul>
				</li>
			</ul>
			<ul class="cols_6">
				<li><a>Stock</a>
					<ul>
						<li><a href="stock_1.html">stock_1</a></li>
						<li><a href="stock_2.html">stock_2</a></li>
					</ul>
				</li>
				<li><a>Отзывы</a>
					<ul>
						<li><a href="testimonials_1.html">О товарах</a></li>
						<li><a href="testimonials_2.html">О продавцах</a></li>
						<li><a href="testimonials_3.html">О магазине</a></li>
					</ul>
				</li>
				<li><a>FAQ</a>
					<ul>
						<li><a href="FAQ_1.html">FAQ_1</a></li>
						<li><a href="FAQ_2.html">FAQ_2</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
	
	<li><a>О магазине</a>
		<div class="submenu cols_box">
			<ul class="cols_6">
				<li><a href="about_1.html">Контакты_1</a></li>
				<li><a href="about_2.html">Контакты_2</a></li>
			</ul>
			<ul class="cols_6">
				<li><a href="about_3.html">Контакты_3</a></li>
				<li><a href="about_4.html">Контакты_4</a></li>
			</ul>
		</div>
	</li>
	
</ul>
Вот и всего-то на всего делов;) Если есть примеры не обязательно такого меню, но с использованием параметров-шаблонов, то тоже было бы интересно, т.к. инфы по организации сложных меню маловато. Спасибо.
Виталий Барышников
01 марта 2016, 11:56
modx.pro
4
3 204
+2

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

Иван Бочкарев
01 марта 2016, 20:45
0
Урок по созданию сложных меню:
Создание адаптивного Mega Menu
    Алексей Федоров
    01 марта 2016, 22:49
    0
    И каким местом это относится к pdoMenu?
      Виталий Барышников
      02 марта 2016, 03:02
      0
      Это не то. Меню у меня готово, завёрстано, застилино, адаптивно. Вопрос в его автоматическом формировании через pdoMenu.
      Григорий Коленько
      02 марта 2016, 05:01
      0
      Тут свой сниппет писать, либо очень хитро сверстать такое меню самому. Да и потом структуры сайта нет. Вообще не ясно как тебе помогать
        Виталий Барышников
        02 марта 2016, 05:20
        0
        А зачем структура? Там же по меню видно кто родители и кто — потомки. Или что нужно? Я уже почти подобрал нужную комбинацию… это криво, но уже выводит категории и подкатегории, как на картинке. Пока проблема с вложенностью элементов.

        [[pdoMenu?
        	&startId=`0`
        	&level=`3`
        	&displayStart=`1`
        	&resources=`-1,-8`
        	&tplOuter=`@INLINE
        	<ul class="main_menu">
        		<li class="show_960 menu_button"></li>
        		[[+wrapper]]
        	</ul>`
        	&tpl=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a></li>`
        	&tplParentRow=`@INLINE <li><a>[[+menutitle]]</a>[[+wrapper]]</li>`
        	&tplInner=`@INLINE <div class="submenu cols_box"><ul>[[+wrapper]]</ul></div>`
        	&tplInnerRow=`@INLINE <li><a href="[[link]]">[[+menutitle]]</a></li>`
        	&tplStart=``
        ]]
        Еще
        <ul class="cols_6">
        можно выводить без класса, не критично.
        Виталий Барышников
        02 марта 2016, 05:53
        0
        Еще вопрос: как заставить работать шаблон tplStart? Вписал его, diplayStart включил, эффекта не видно.
          Купчинский Михаил
          02 марта 2016, 08:22
          0
          &tplStart по идее должно работать с только с &parents. ну и шаблон его вывода нужно сделать.
          А в этом шаблоне как вариант можно вызвать еще раз &pdoMenu
          Виталий Барышников
          02 марта 2016, 07:01
          0
          -
            Виталий Барышников
            02 марта 2016, 08:25
            +1
            Ура! Получилось, метод осознанного тыка сработал.
            Вот оно:
            [[pdoMenu?
            	&startId=`0`
            	&level=`3`
            	&tplOuter=`@INLINE
            	<ul class="main_menu">
            		<li class="menu_button"></li>
            		[[+wrapper]]
            	</ul>`
            	&tpl=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a></li>`
            	&tplParentRow=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a>[[+wrapper]]</li>`
            	&tplInner=`@INLINE <ul>[[+wrapper]]</ul>`
            	&tplInnerRow=`@INLINE <li><a href="[[link]]">[[+menutitle]]</a></li>`
            	&tplCategoryFolder=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a><div class="submenu cols_box">[[+wrapper]]</div></li>`
            ]]
              Виталий Барышников
              02 марта 2016, 08:44
              0
              Выглядит как надо, но по ходу tpl не срабатывет, т.к. конечные пункты меню выводятся без ссылки в href и не понятно откуда взялись stylы и classы внутри. Вот так:
              <li class=""><a style="" class="" href="">Товар 1</a></li>
              <li class=""><a style="" class="" href="">Товар 2</a></li>
                Виталий Барышников
                02 марта 2016, 08:59
                0
                Это видимо несовместимость &tplInnerRow и &tpl, поэтому убираем строку &tplInnerRow и всё работает как надо.
                  Купчинский Михаил
                  02 марта 2016, 13:53
                  0
                  В приведенном примере
                  &tplInnerRow=`@INLINE <li><a href="[[link]]">[[+menutitle]]</a></li>`
                  нет + у link. Вот оно и не работало)
              Виталий Барышников
              03 марта 2016, 14:05
              0
              Если кто-то подскажет как можно поделить этот список на колонки, например каждые три категории оборачивать в
              <ul class="cols_6">
              то будет вообще шикарно. Т.е. это видимо должен быть сниппет принимающий пару параметров: через сколько делить и во что оборачивать (или какой класс подставлять в контейнер). И тогда будет точно как на картинке наверху.
              Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
              14