0
down vote
favorite
I am trying to develop a "mega menu" type set up in silver stripe with a few alternate options depending on the number of levels of children that particular page has. There are the possible menu options 1) A top level only link 2) A Top Level Link with a dropdown (two levels total) 3) a top level link with a mega menu drop down (3 levels total). I have done my static markup and it all works fine but I am having trouble looping over the menus to generate the correct code in the dropdowns. My code for two layers works fine, but when trying introduce a third layer it breaks all together and no dropdowns work.
my code is:
<ul class="right hide-on-med-and-down">
<% loop $Menu(1) %>
<li><a href="$Link" class="$LinkingMode mega-top">$MenuTitle</a>
<% if $Menu(3) %>
<div class="mega-dropdown">
<ul>
<% loop $Menu(2) %>
<span><a href="$Link">$MenuTitle</a></span>
<% loop $Menu(3) %>
<a href="$Link" class="$LinkingMode mega-dropdown">$MenuTitle</a>
<% end_loop %>
<% end_loop %>
</ul>
</div>
<% else_if $Menu(2) %>
<div class="mega-dropdown">
<ul>
<% loop $Menu(2) %>
<a href="$Link" class="$LinkingMode mega-dropdown">$MenuTitle</a>
<% end_loop %>
</ul>
</div>
<% else %>
<% loop $Menu(1) %>
<li><a href="$Link" class="$LinkingMode mega-top">$MenuTitle</a></li>
<% end_loop %>
<% end_if %>
</li>
<% end_loop %>
<li><a href="tel:1300464427" class="tel-hov">1300 4 MIGAS</a></li>
<li><a href="#"><i class="material-icons" style="font-size: 1.2em;">search</i></a></li>
</ul>`
