Странное поведение PdoMenu
Всем привет!
Решил организовать 2-х уровневое меню на navbar от Bootstrap 4.
Скрин структуры в приложении.
Код из примера следующий:
Меняем div на ul в
Что такое может быть?
И второй вопрос как вывести отображение строки из выпадающего списка в таком виде
Решил организовать 2-х уровневое меню на navbar от Bootstrap 4.
Скрин структуры в приложении.
Код из примера следующий:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Вывожу:<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
[[!pdoMenu?
&level=`2`
&parents=`0`
&outerClass=`navbar-nav`
&&tplInnerHere=`@INLINE <li class="nav-item active">
<a class="nav-link" href="[[+link]]" [[+attributes]]>[[+menutitle]] <span class="sr-only">(current)</span></a>[[+wrapper]]
</li>`
&tpl=`@INLINE <li class="nav-item">
<a class="nav-link" href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]
</li>`
&tplOuter=`@INLINE <ul [[+classes]]>[[+wrapper]]</ul>`
&tplInner=`@INLINE <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> [[+wrapper]] </div>`
&tplParentRow=`@INLINE
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
[[+menutitle]]
</a>
[[+wrapper]]
</li>`
]]
</div>
</nav>
В итоге получаю:<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Главная</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
О нас
</a>
<div class="dropdown-menu" href="http://new.bis-lab.ru/" aria-labelledby="navbarDropdownMenuLink"> </div>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us/about-the-company.html">О компании</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us/certificates.html">Сертификаты</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us/lending.html">Кредитование</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us/feedback-and-suggestions.html">Отзывы и предложения</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us/terms-of-delivery.html">Условия доставки</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us/jobs.html">Вакансии</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us/store-details.html">Реквизиты магазина</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us/price.html">Прайс</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us/competitions-(tendering).html">Конкурсы (Торги)</a>
</li>
</ul>
</div>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Каталог
</a>
<div class="dropdown-menu" href="http://new.bis-lab.ru/" aria-labelledby="navbarDropdownMenuLink"> </div>
</li>
<li class="nav-item">
<a class="nav-link" href="directory/office-equipment/">Оргтехника</a>
</li>
<li class="nav-item">
<a class="nav-link" href="service.html">Сервис</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Новости
</a>
<div class="dropdown-menu" href="http://new.bis-lab.ru/" aria-labelledby="navbarDropdownMenuLink"> </div>
</li>
<li class="nav-item">
<a class="nav-link" href="news/printing-technology-micropiezo.html">Технология печати MicroPiezo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news/the-main-signs-of-failure-of-an-inkjet-printer.html">Основные признаки поломки струйного принтера</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news/copy-print-technology-micropiezo.html">Копия Технология печати MicroPiezo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news/copy-print-technology-micro-piezo.html">Копия Технология печати Micro Piezo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html">Контакты</a>
</li>
<li class="nav-item">
<a class="nav-link" href="basket.html">Корзина</a>
</li>
</nav>
И видим что в tplInner не попадают ресурсы из данного раздела.Меняем div на ul в
&tplInner=`@INLINE <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> [[+wrapper]] </div>`
Все ок! Но тогда не работает выпадение при клике.Что такое может быть?
И второй вопрос как вывести отображение строки из выпадающего списка в таком виде
<a class="dropdown-item" href="#">Action</a>
Заранее спасибо!
Поблагодарить автора
Отправить деньги
Комментарии: 3
Попробуй так:
[[pdoMenu?
&parents=`0`
&level=`2`
&firstClass=``
&lastClass=``
&outerClass=`navbar-nav`
&innerClass=`dropdown-menu`
&parentClass=`dropdown`
&rowClass=`nav-item`
&tpl=`@INLINE <li{$classes}><a class="nav-link" href="{$link}">{$menutitle}</a>{$wrapper}</li>`
&tpl
&tplInnerRow=`@INLINE <a class="dropdown-item" href="{$link}">{$menutitle}</a>{$wrapper}`
&tplParentRow=`@INLINE
<li{$classes}>
<a class="nav-link dropdown-toggle" href="{$link}" id="navbarDropdownMenuLink-{$id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{$menutitle}</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-{$id}">
{$wrapper}
</div>
</li>`
&tplHere=`@INLINE <li{$classes}><a class="nav-link" href="{$link}">{$menutitle} <span class="sr-only">(current)</span></a>{$wrapper}</li>`
&tplInnerHere=`@INLINE <a class="dropdown-item active" href="{$link}">{$menutitle}</a>{$wrapper}`
]]
Меняем div на ul вСкорее всего из-за дублирования ссылок и индентификаторов блоков с содержимым выпадашки. Нужно сделать уникальным этот индентификатор:
&tplInner=`@INLINE [[+wrapper]] `Все ок! Но тогда не работает выпадение при клике.
navbarDropdownMenuLinkЯ, к примеру, это сделал дописав у него в конце id родительского ресурса:
navbarDropdownMenuLink-{$id}
Спасибо огромное!
Заработало с таким кодом:
Заработало с таким кодом:
[[!pdoMenu?
&parents=`0`
&level=`2`
&firstClass=``
&lastClass=``
&outerClass=`navbar-nav`
&parentClass=`dropdown`
&rowClass=`nav-item`
&tpl=`@INLINE <li{$classes}><a class="nav-link" href="{$link}">{$menutitle}</a>{$wrapper}</li>`
&tplInnerRow=`@INLINE <a class="dropdown-item" href="{$link}">{$menutitle}</a>{$wrapper}`
&tplInner=`@INLINE {$wrapper}`
&tplParentRow=`@INLINE
<li{$classes}>
<a class="nav-link dropdown-toggle" href="{$link}" id="navbarDropdownMenuLink-{$id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{$menutitle}</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-{$id}">
{$wrapper}
</div>
</li>`
&tplHere=`@INLINE <li{$classes}><a class="nav-link" href="{$link}">{$menutitle} <span class="sr-only">(current)</span></a>{$wrapper}</li>`
&tplInnerHere=`@INLINE <a class="dropdown-item active" href="{$link}">{$menutitle}</a>{$wrapper}`
]]
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.