Сложное меню
Здравствуйте. Прошу помощи по организации менюхи. Раньше мне такие сложные не попадались, поэтому решил спросить. В доках нет примеров использования всех параметров-шаблонов, поэтому разобраться не смог. Не понятно что тут tplParentRow, tplInner, tplInnerRow, запутался уже в их комбинациях.
Выглядит это примерно так:
Далее часть его HTML-структуры.
Выглядит это примерно так:
Далее часть его 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>
Вот и всего-то на всего делов;) Если есть примеры не обязательно такого меню, но с использованием параметров-шаблонов, то тоже было бы интересно, т.к. инфы по организации сложных меню маловато. Спасибо.Комментарии: 14
Урок по созданию сложных меню:
Создание адаптивного Mega Menu
Создание адаптивного Mega Menu
И каким местом это относится к pdoMenu?
Это не то. Меню у меня готово, завёрстано, застилино, адаптивно. Вопрос в его автоматическом формировании через pdoMenu.
Тут свой сниппет писать, либо очень хитро сверстать такое меню самому. Да и потом структуры сайта нет. Вообще не ясно как тебе помогать
А зачем структура? Там же по меню видно кто родители и кто — потомки. Или что нужно? Я уже почти подобрал нужную комбинацию… это криво, но уже выводит категории и подкатегории, как на картинке. Пока проблема с вложенностью элементов.
[[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">
можно выводить без класса, не критично.
Еще вопрос: как заставить работать шаблон tplStart? Вписал его, diplayStart включил, эффекта не видно.
&tplStart по идее должно работать с только с &parents. ну и шаблон его вывода нужно сделать.
А в этом шаблоне как вариант можно вызвать еще раз &pdoMenu
А в этом шаблоне как вариант можно вызвать еще раз &pdoMenu
-
Ура! Получилось, метод осознанного тыка сработал.
Вот оно:
Вот оно:
[[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>`
]]
Выглядит как надо, но по ходу tpl не срабатывет, т.к. конечные пункты меню выводятся без ссылки в href и не понятно откуда взялись stylы и classы внутри. Вот так:
<li class=""><a style="" class="" href="">Товар 1</a></li>
<li class=""><a style="" class="" href="">Товар 2</a></li>
Это видимо несовместимость &tplInnerRow и &tpl, поэтому убираем строку &tplInnerRow и всё работает как надо.
В приведенном примере
&tplInnerRow=`@INLINE <li><a href="[[link]]">[[+menutitle]]</a></li>`
нет + у link. Вот оно и не работало)
Если кто-то подскажет как можно поделить этот список на колонки, например каждые три категории оборачивать в
<ul class="cols_6">
то будет вообще шикарно. Т.е. это видимо должен быть сниппет принимающий пару параметров: через сколько делить и во что оборачивать (или какой класс подставлять в контейнер). И тогда будет точно как на картинке наверху.
docs.modx.pro/components/pdotools/general-settings#Параметры-шаблонов – Это не поможет?
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.