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   1805 Views

Avatar
Akaidu

Community Member, 2 Posts

31 January 2012 at 1:20am

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

Forum Moderator, 1132 Posts

31 January 2012 at 6:21am

Edited: 31/01/2012 6:23am

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

Community Member, 2 Posts

31 January 2012 at 10:13am

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

Community Member, 2 Posts

2 February 2012 at 1:29am

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.