Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Multi Layer Nested Menus in Silverstripe


Go to End


2 Posts   2467 Views

Avatar
bcapel

Community Member, 3 Posts

22 August 2016 at 5:58pm


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>`

Avatar
zenmonkey

Community Member, 545 Posts

6 September 2016 at 5:41pm

The problem is probably because you're looping a menu function inside a menu. Inside your $Menu(2) loop you shoudl be using $Children instead of $Menu(3)

https://docs.silverstripe.org/en/3.4/developer_guides/templates/how_tos/navigation_menu/