Помогите сделать меню в PdoMenu
Добрый день. Возникла проблема с организацией меню. Раньше работал с Wayfinder, а теперь решил сделать на Bootstrap и PdoTools, но никак не могу въехать как организовать меню. Как известно, Bootstrap 3 не позволяет сделать многоуровневое меню. Нашёл где-то костыль, плюс сторонние скрипты для hover эффекта на touch девайсах. Меню выглядит как-то так:
В общем, буду очень благодарен за пинок в нужном направлении.
<!-- Navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="nav_grinlib_building hidden-xs hidden-sm" href="#"><img src="grinlib_building.jpg" alt="" title="" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right nav_search">
<form class="navbar-form navbar-left" action="#" method="post">
<div class="input-group">
<input type="text" class="form-control" placeholder="Поиск по сайту">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
</div>
</form>
</ul>
<!-- Left nav -->
<ul class="nav navbar-nav">
<li><a href="#" class="disabled">Submenu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" class="disabled">Submenu 1.1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
</ul>
</li>
<li><a href="#" class="disabled">Submenu 1.2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="disabled">Submenu 2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" class="disabled">Submenu 2.1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
</ul>
</li>
<li><a href="#" class="disabled">Submenu 2.2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="disabled">Submenu 3 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
</ul>
</li>
</ul>
</div>
</div><!--/.nav-collapse -->В общем, буду очень благодарен за пинок в нужном направлении.
Комментарии: 13
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
kr2.tpl.ParentRow:
kr2.tpl.ParentRow.active:
Шаблон права не Bootstrap a Semantic, но думаю на Bootstrap будет даже проще.
взято отсюда minishop2.com, структура схожа с ваше, а точнее оригинал D
или
Сделал, но не отображается именно третий уровень, вместо него просто пустое поле
АнтонПоиск в интернете Bootstrap 4 + pdoMenu ничего толкового не дал, кроме пары способов с ужасными костылями. Решение для Bootstrap 3 не подходит в силу изменения верстки. Решения с заменой DIV на UL меня лично не устраивают, если разработчики решили сделать DIV, значит так лучше)
Почитал, разобрался, сделал. Для тех кому может понадобиться(не забудьте удалить комментарии из кода):
Все отлично работает на 2 уровня, кусок кода navbar на котором тестировалось:
Твой единственный полностью рабочий способ (главное комментарии в коде убрать -) ), у всех остальных способов костыли ппц UL с DIV путают, в результате стили бутсрапа не подцепляются. А есть страшенные велосипеды с феномом еще.
Вот тоже велосипед на феноме, и он даже работает как нужно, но если перейти на ссылку контейнер dropdown-menu, то меню ломается.
Чтоб такое феном?
Меню то что получилось
Как должно быть
yadi.sk/i/KxJTUlwza-spiQ
yadi.sk/i/j-REqEna4gVqsQ
Что получилось пока что
yadi.sk/i/uYVkELbfhI643g
yadi.sk/i/ewTM-8ovdexneA