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.

Themes

Discuss SilverStripe Themes.

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

Issues creating a 'dynamic' sub-menu


Reply

4 Posts   1634 Views

Avatar
Akaidu

31 January 2012 at 1:20am Community Member, 2 Posts

So I have the basic menu set up:
---------
-Active Page
-Page
-Page
-Page
---------

I'm wanting to get something along the lines of this:

---------
-Active page
-Sub-page
-Sub-Page
-Page
-Page
-Sub-Page (hidden in menu)
-Sub-Page (hidden in menu)
---------

I came across this:

<% if Menu(2) %>
<h2><% control Level(1) %>$Title<% end_control %></h2>
<div class="list">
<ul>
<% control Menu(2) %>
<% if Children %>
<li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levela"><span><em>$MenuTitle.XML</em></span></a>
<% else %>
<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levela"><span><em>$MenuTitle.XML</em></span></a>
<% end_if %>

<% if LinkOrSection = section %>
<% if Children %>
<ul class="sub">
<li>
<ul class="roundWhite">
<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levelb"><span><em>$MenuTitle.XML</em></span></a></li>
<% end_control %>
</ul>
</li>
</ul>
<% end_if %>
<% end_if %>
</li>
<% end_control %>
</ul>
</div>
<!-- list -->
<p>&nbsp;</p>
<% end_if %>

But try as I might I just can't get it working. Perhaps I'm putting it in the wrong place? Maybe some of those 2s should be 1s? As a SilverStripe newbie, I'm just not sure. Any help would be appreciated.

Avatar
martimiz

31 January 2012 at 6:21am (Last edited: 31 January 2012 6:23am), Forum Moderator, 1091 Posts

Supposing the basic set of pages you talk about are all root pages, a very simple menu would work like this. Menu(1) will give you the rootpages: for each page you check if it has any children, and if it does, you create a nested unordered list for them.

<% if Menu(1) %>
   <ul>
   <% control Menu(1) %>
   <li>
      <a class="$LinkingMode" href="$Link">$MenuTitle</a>
      <% if Children %>
         <ul>
            <% control Children %>
            <li>
               <a class="$LinkingMode" href="$Link">$MenuTitle</a>
            </li>
            <% end_control %>
         </ul>
      <% end_if %>
   </li>
   <% end_control %>
   </ul>
<% end_if %>

The actual design/hiding/showing will need some classes/javascript - but this will give you the basics.

Using Menu(2) instead of Menu(1) would give you all childpages of the currentpage, so that would work fine for a submenu.

Avatar
markjames

31 January 2012 at 10:13am Community Member, 2 Posts

I required the same functionality (but to any sub-level), so I created a module for it if you're interested: https://github.com/markjames/silverstripe-nestedmenu

Avatar
Akaidu

2 February 2012 at 1:29am Community Member, 2 Posts

Many thanks, guys.

Marti - I already have the design working as it should be, I just need it to hide/show the sub-menu based on whether the active page has children or not, and if so: Only show the the children of the active page.

Mark - Thanks for the link and module, I'll certainly give it a look and see if I can't figure out how it works.