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.

Themes /

Discuss SilverStripe Themes.

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

Issues creating a 'dynamic' sub-menu


Go to End


4 Posts   4455 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, 1391 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.