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.

Archive /

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

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

Menu: How to add a third level?


Go to End


8 Posts   4301 Views

Avatar
u_marvin

Community Member, 3 Posts

10 October 2008 at 3:19am

Hi,

I'd like to add a third level to my menu(1). The next level should appear under the active link of the superior.

It works perfectly with the second, but my Problem is, that the third level does not appear under the active link of the second. I have no idea how to get it work. I think is it quite easy, can anybody help?

Here is the code from my navigation.ss:

<ul>
<% control Menu(1) %>
<% if Children %>
				<li class="$LinkingMode"><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a>
<% else %>
				<li><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a>
<% end_if %>	  
<% if LinkOrSection = section %>
<% if Children %>
				<ul class="sub">
					<% control Children %>
					
					
					<li><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode">$MenuTitle</a></li>
					
					
					<% end_control %>
				</ul>
<% end_if %>
<% end_if %>
				</li> 
<% end_control %>
			</ul>

Avatar
artlung

Community Member, 10 Posts

10 October 2008 at 4:35am

Edited: 10/10/2008 4:37am

I think it would be this... just add an additional nested

if Children
and
control Children
block.

<ul>
<% control Menu(1) %>
	<% if Children %>
		<li class="$LinkingMode"><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a>
	<% else %>
		<li><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a>
	<% end_if %> 
	<% if LinkOrSection = section %>
	<% if Children %>
		<ul class="sub">
		<% control Children %>
			<li><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode">$MenuTitle</a></li>		       	
			<% if Children %>
			<ul class="subsub">
			<% control Children %>
				<li><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode">$MenuTitle</a></li>
			<% end_control %>
			</ul><!--.subsub-->
			<% end_if %>
		<% end_control %>
		</ul><!--.sub-->
	<% end_if %><!--if Children-->
	<% end_if %><!--if LinkOrSection-->
		</li><!-- end top level menu item-->
<% end_control %>
</ul> 

Avatar
u_marvin

Community Member, 3 Posts

10 October 2008 at 8:08am

That works perfectly. I tried it by myself before with another children tag, but it didn't work.

Thank you very much!

Avatar
jest

Community Member, 6 Posts

10 October 2008 at 12:00pm

Hey thanks artlung,

Just solved an issue I was going to tackle.
Biggie ups!
J.

Avatar
u_marvin

Community Member, 3 Posts

10 December 2008 at 10:59pm

Hey,

thanks for your help again. I have another question to the third level in my menu: How does it work that the items from the third level are hidden until the user clicks on the superior item in the second?

My problem is that there is a long list under the first item of the second level. It would be easier for the user if the third level is not shown until they are on a site of the second one.

Here is a little example of my problem:

TOYS
- Boys
--Good
--- Monstertrucks <<< How can I hide these items until the user is on the "Good"-site?
--- PowerRangers <<<
--- Baseball <<<
--Bad
- Girls
- Both

The code I used for my third level is in the second post.

Thank you very much for a little help!

Avatar
SalvaStripe

Community Member, 89 Posts

11 December 2008 at 3:06am

Edited: 11/12/2008 3:08am

Code from User "artlung":

<ul>
<% control Menu(1) %>
   <% if Children %>
      <li class="$LinkingMode"><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a>
   <% else %>
      <li><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a>
   <% end_if %>
   <% if LinkOrSection = section %>
   <% if Children %>
      <ul class="sub">
      <% control Children %>
         <li><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode">$MenuTitle</a></li>          
         <% if Children %>
         <ul class="subsub">
         <% control Children %> <!-- THIS IS THIRD LEVEL, RIGHT? -->
            <li><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode">$MenuTitle</a></li>
         <% end_control %> <!-- THIS IS END OF THIRD LEVEL, RIGHT? -->
         </ul><!--.subsub-->
         <% end_if %>
      <% end_control %>
      </ul><!--.sub-->
   <% end_if %><!--if Children-->
   <% end_if %><!--if LinkOrSection-->
      </li><!-- end top level menu item-->
<% end_control %>
</ul> 

When you mean, to hide the THIRD level in your menu, then just delete the THIRD level code from the menu code, or is that wrong?

<ul>
<% control Menu(1) %>
   <% if Children %>
      <li class="$LinkingMode"><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a>
   <% else %>
      <li><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a>
   <% end_if %>
   <% if LinkOrSection = section %>
   <% if Children %>
      <ul class="sub">
      <% control Children %>
         <li><a href="$Link" title="ADV: $Title.XML page" class="$LinkingMode">$MenuTitle</a></li>          
<!-- HERE WAS THE CHILDREN CONTROL OF THE CHILDREN CONTROL -->
      <% end_control %>
      </ul><!--.sub-->
   <% end_if %><!--if Children-->
   <% end_if %><!--if LinkOrSection-->
      </li><!-- end top level menu item-->
<% end_control %>
</ul> 

Avatar
SalvaStripe

Community Member, 89 Posts

11 December 2008 at 3:18am

this is a typical "just show level1 and level2" navigation from one of my homepages..

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

nothing special.. if your problem is another problem, then post here again :S^^

Avatar
artlung

Community Member, 10 Posts

11 December 2008 at 3:43am

So the way I do this is this:

<a href="<a class="subButton" href="$Link" title="Go to the &quot;{$Title}&quot; page" target="_self">">$MenuTitle</a> <% if Children %><a id="id-$ID-nav" href="javascript:;" class="rollover" title="Expand or close this submenu">&gt;</a><% end_if %>
<% if Children %>

	<div id="id-$ID-navsub" class="subnav"

	<% if LinkOrSection != section %>

		style="display: none;"

	<% end_if %>

	>

		<ul>

			<% control Children %>

				<!--li class="$LinkingMode"--><!--$ID  $Parent.ID-->

				<li><a class="subButton" href="$Link" title="Go to the &quot;{$Title}&quot; page" target="_self">$MenuTitle</a></li>

    		<% end_control %>

		</ul>

</div>

<% end_if %>

Then, because I use jQuery, I have this in my JavaScript:

jQuery(".rollover").click(function(){
	var parent_id = jQuery(this).attr('id'); // id-4-nav
	var child_id  = "#" + parent_id + 'sub'; // id-4-navsub
	jQuery(child_id).slideToggle("normal");
	jQuery(this).toggleClass("active"); return false;
})