Столкнулся с таким вопросом как будет прописан правильный вывод двухуровневого меню из pdoMenu
Знаю для одного уровня нужно:
[[pdoMenu?
&parents=`0`
&level=`1`
]]
Как будет правильный вывод, если у меня два уровня? а также что можно применить дополнительно чтобы не терять его стили???
Оставлю для примера HTML and CSS код
HTML
<nav class="ver_menu">
<ol class="first_level">
<li><a href="#">Витрины</a></li>
<li>
<a href="#">Холодильники</a>
<ul class="second_level">
<li><a href="#">Vestfrost</a></li>
<li><a href="#">LG</a></li>
<li><a href="#">Bosch Bosch</a></li>
<li><a href="#">Beko Beko</a></li>
<li><a href="#">Indesit Indesit</a></li>
<li><a href="#">Gorenje Gorenje</a></li>
<li><a href="#">Hotpoint-Ariston</a></li>
<li><a href="#">Hotpoint-Ariston</a></li>
<li><a href="#">Whirlpool Whirlpool</a></li>
</ul>
</li>
<li><a href="#">Стиральные машины</a>
<ul class="second_level">
<li><a href="#">Vestfrost</a></li>
<li><a href="#">LG</a></li>
<li><a href="#">Bosch Bosch</a></li>
<li><a href="#">Beko Beko</a></li>
<li><a href="#">Indesit Indesit</a></li>
<li><a href="#">Gorenje Gorenje</a></li>
<li><a href="#">Hotpoint-Ariston</a></li>
<li><a href="#">Hotpoint-Ariston</a></li>
<li><a href="#">Whirlpool Whirlpool</a></li>
</ul>
</li>
<li><a href="#">Хлебопечки</a>
<ul class="second_level">
<li><a href="#">Vestfrost</a></li>
<li><a href="#">LG</a></li>
<li><a href="#">Bosch Bosch</a></li>
<li><a href="#">Beko Beko</a></li>
<li><a href="#">Indesit Indesit</a></li>
<li><a href="#">Gorenje Gorenje</a></li>
<li><a href="#">Hotpoint-Ariston</a></li>
<li><a href="#">Hotpoint-Ariston</a></li>
<li><a href="#">Whirlpool Whirlpool</a></li>
</ul>
</li>
<li><a href="#">Микроволновки</a></li>
<li><a href="#">Генераторы льда</a></li>
<li><a href="#">Телевизоры</a></li>
<li><a href="#">Планшеты</a></li>
<li><a href="#">Утюги</a></li>
<li><a href="#">Электрочайники</a></li>
</ol>
</nav>
CSS
.ver_menu {
background-color: #fff;
margin: 30px 0 16px;
width: 270px;
-webkit-box-shadow: 0 0 24px 3px rgba(234,236,240,1);
-moz-box-shadow: 0 0 24px 3px rgba(234,236,240,1);
box-shadow: 0 0 24px 3px rgba(234,236,240,1);
}
.first_level > li {
position: relative;
margin: 0 24px;
border-bottom: 1px solid #e2e2e2;
}
.first_level > li a {
font-family: 'Roboto-Medium', sans-serif;
font-weight: 500;
font-size: 14px;
color: #1b1b1b;
padding: 23px 0 16px;
display: block;
}
.first_level > li:last-child {
border-bottom: none;
}
.second_level {
display: none;
position: absolute;
z-index: 3;
top: -56px;
width: 200px;
left: 223px;
padding-left: 60px;
background-color: #fff;
-webkit-box-shadow: 12px 0 24px 3px rgba(234,236,240,1);
-moz-box-shadow: 12px 0 24px 3px rgba(234,236,240,1);
box-shadow: 12px 0 24px 3px rgba(234,236,240,1);
}
.first_level > li:nth-child(2):after, .first_level > li:nth-child(3):after, .first_level > li:nth-child(4):after {
content: '';
background: url(../images/vertical_menu/arrow.png) no-repeat;
width: 8px;
height: 14px;
position: absolute;
top: 25px;
right: 0;
z-index: 2;
}
.second_level > li:first-child {
padding-top: 20px;
}
.second_level > li a {
font-family: 'Roboto-Regular', sans-serif;
font-size: 12px;
color: #262626;
padding: 10px 0 10px;
}
Павел Романов 14.01.2018 12:55 #
Чанк menu-item:
Александр 14.01.2018 13:36 #
{$wrapper}
<br /><br />
{$wrapper} — тоже чанк будет или нет?<br />
<br />
Вот как было и как стало<br />
semenovalex.com/
Павел Романов 14.01.2018 13:49 #
Можете попробовать для чистоты эксперимента так:
Чанк menu-item:
Александр 14.01.2018 14:03 #