Nested Menus: Show 3. Level as Drop-Down on 2. and 3. Level

Solved
Highlighted
Tourist
3 1 0

I want to show the 3. level menu-links as a drop-down next to the tag filters on the collection page for 2. and 3. level menu collections. 

 

So far it works good for the 2. level menu collections. You can choose the respective 3. level links via drop-down, if there are any. 

 

<div class="col-auto text-center">	
	{% for link in linklists.main-menu.links %} 
		{% if link.links != blank %}								
			{% for child_link in link.links %} 	
				{% if child_link.links != blank %}
					{% if child_link.active %}		
						<div class="dropdown">
							<a class="btn btn-outline-dark btn-filter dropdown-toggle" href="#" type="button" id="producttype" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
											    	Produkttyp
							</a>
							<div class="dropdown-menu ddm-filter" aria-labelledby="producttype">
								<ul class="list-unstyled mb-0">
									{% for grandchild_link in child_link.links %}  											 
										<li><a class="dropdown-item ddi-filter" href="{{ grandchild_link.url }}">{{ grandchild_link.title }}</a></li> 
									{% endfor %}
								</ul>	
							</div>
						</div>												
					{% endif %}
				{% endif %}																									
			{% endfor %} 						
		{% endif %} 
	{% endfor %}
</div>

I don't get the drop-down for third level to work, when a third level menu collection is active. 

 

If you leave out 

 

{% if child_link.active %}

it will loop all third level links and show them on 2. and 3. level menu collection pages. 

 

I tried to use something like 

{% if child_link.active or grandchild_link.active %}

but it doesn't work. 

 

Thanks for any help.

 

Rolf

 

 

0 Likes
Highlighted

Success.

Tourist
3 1 0

It looks a bit messy, but repeating the whole thing for grandchild did it. 

{% for link in linklists.main-menu.links %}
	{% if link.links != blank %}
		{% for child_link in link.links %}  
			{% if child_link.links != blank %}
				{% for grandchild_link in child_link.links %} 
					{% if grandchild_link.active %}
						<div class="dropdown">
							<a class="btn btn-outline-dark btn-filter dropdown-toggle" href="#" type="button" id="producttype" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
											    	Produkttyp
							</a>
							<div class="dropdown-menu ddm-filter" aria-labelledby="producttype">
								<ul class="list-unstyled mb-0">
									{% for grandchild_link in child_link.links %}  
										<li><a class="dropdown-item ddi-filter" href= "{{ grandchild_link.url }}">{{ grandchild_link.title }}</a></li>
									{% endfor %}
								</ul>
							</div>
						</div>
					{% endif %}
				{% endfor %}
			{% endif %}
		{% endfor %}
	{% endif %}
{% endfor %}
0 Likes