Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Multi-level Menu Help

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Page: 1 2
Go to End
Author Topic: 5660 Views
  • peacho
    Avatar
    Community Member
    5 Posts

    Multi-level Menu Help Link to this post

    Hi. I'm having an issue making a multi-level menu. I have this setup in my admin-view-tree.

    However, I can only get two levels to show up on the actual page's sidebar. I attempted to do some code hacking on the .ss page, but couldn't quite get it. Could someone give me some guidance?

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: Multi-level Menu Help Link to this post

    Are you using the blackcandy theme? I think it should support at least 4 levels - first level in the tabs, then 3 levels on that sidebar... So try have a look at that Sidebar.ss file

    So you would have this sort of structure for 3 levels in the same nav

    <% control Menu(1) %>
    // outputs top level - Product Support
    <% control Children %>
    // outputs BCC Support, BCC worksheet etc
    <% control Children %>
    // Outputs 3rd level - Codename Topaz..
    <% end_control %>
    <% end_control %>
    <% end_control %>

  • peacho
    Avatar
    Community Member
    5 Posts

    Re: Multi-level Menu Help Link to this post

    I am using the "Pluralism" theme. So a setup like the one you posted should work? And if so, is there some specific order (inside/outside/etc.) I need to put the <ul> and </ul> tags in to create a indented list?

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: Multi-level Menu Help Link to this post

    if you want to indent the list then you should nestle the ul so like http://pastie.org/224229

  • peacho
    Avatar
    Community Member
    5 Posts

    Re: Multi-level Menu Help Link to this post

    I applied the code in the pastie and it did make a change, however now instead of dynamically showing the levels, it always shows every page on the site, and there are no indentations:

    I'm sorry that I have to ask for all the help, but this is really my first time actually using SilverStripe for a project.

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: Multi-level Menu Help Link to this post

    You have to use CSS to control the indentations. HTML alone doesnt work. Try something like below. Im assuming the sidebar has a id of #Sidebar

    #Sidebar ul ul {
    margin-left: 10px;
    }

  • peacho
    Avatar
    Community Member
    5 Posts

    Re: Multi-level Menu Help Link to this post

    This is kind of a large bump, so apologies for that. I've fixed a few bugs, but am stuck with one. Instead of only showing the children of the current page/section, it shows every page and every subpage within it.

    This is my current Sidebar.ss file:

    <ul>
    <% control Menu(1) %>
    <li><a href="$Link" title="Go to the $Title.XML page" <% if LinkingMode %>class="$LinkingMode"<% end_if %>>$MenuTitle</a>
    <% if Children %>
    <ul>
    <% control Children %>
    <li><a href="$Link" title="Go to the $Title.XML page" <% if LinkingMode %>class="$LinkingMode"<% end_if %>>$MenuTitle</a>
    <% if Children %>
    <ul>
    <% control Children %>
    <li><a href="$Link" title="Go to the $Title.XML page" <% if LinkingMode %>class="$LinkingMode"<% end_if %>>$MenuTitle</a></li>
    <% end_control %>
    </ul>
    <% end_if %>
    </li>
    <% end_control %>
    </ul>
    <% end_if %>
    </li>
    <% end_control %>
    </ul>

  • Willr
    Avatar
    Forum Moderator
    5462 Posts

    Re: Multi-level Menu Help Link to this post

    if you only want to show the children on the selected page then you have to nestle the 2nd and 3rd control Children in a command to detect if they are in the Current Section by using LinkOrSection = section which will return true if you are on that page or a child of that page (eg in the same section of the tree

    <ul>
    <% control Menu(1) %>
    <li><a href="$Link" title="Go to the $Title.XML page" <% if LinkingMode %>class="$LinkingMode"<% end_if %>>$MenuTitle</a>
    <% if LinkOrSection = section %>
    <% if Children %>
    <ul>
    <% control Children %>
    <li><a href="$Link" title="Go to the $Title.XML page" <% if LinkingMode %>class="$LinkingMode"<% end_if %>>$MenuTitle</a>
    <% if LinkOrSection = section %>
    <% if Children %>
    <ul>
    <% control Children %>
    <li><a href="$Link" title="Go to the $Title.XML page" <% if LinkingMode %>class="$LinkingMode"<% end_if %>>$MenuTitle</a></li>
    <% end_control %>
    </ul>
    <% end_if %>
    <% end_if %>
    </li>
    <% end_control %>
    </ul>
    <% end_if %>
    <% end_if %>
    </li>
    <% end_control %>
    </ul>

    5660 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.