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.

Template Questions /

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

3rd level menu display issues


Go to End


5 Posts   5448 Views

Avatar
jbundy

Community Member, 8 Posts

5 January 2009 at 11:40am

Edited: 05/01/2009 11:46am

I currently have 3 levels of menus but I'm having trouble getting them to display correctly. I have two problems.

First - I can get them to display, but all of the #3 menu items are displayed when I select a #2 menu item.

Second - When I select a #3 menu item the menu looses where it is and goes back to displaying only #1 menu items. It seems to have trouble tracking the parent of the #3 menu items.

The code I'm using in my Navigations.ss file lookes like this -

<ul id="Navigation">
<% control Menu(1) %>
<li>
<a class="$LinkingMode" href="$Link" title="Go to the $Title.XML page">$MenuTitle<span></span></a>
<% if Children %>
<% if LinkingMode = section %>
<ul id="Sub-Menu">
<% control Children %>
<li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
<% if LinkingMode = current %>
<a class="items" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
<% else %>
<a class="item" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
<% end_if %>
</li>
<% end_control %>
</ul>
<% end_if %>
<% if LinkingMode = current %>
<ul id="Sub-Menu">
<% control Children %>
<li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
<% if LinkingMode = current %>
<a class="items" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
<% else %>
<a class="item" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
<% if Children %>
<ul id="Sub-Sub-Menu">
<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode">$MenuTitle</a></li>
<% end_control %>
</ul>
<% end_if %>
<% end_if %>
</li>
<% end_control %>
</ul>
<% end_if %>
<% end_if %>
</li>
<% end_control %>
</ul>

You can see an example at http://d78800.u39.thenewpush.net/snowboards-2/

Avatar
Nivanka

Community Member, 400 Posts

5 January 2009 at 3:37pm

try with the following



<ul id="Navigation">
   <% control Menu(1) %>
      <li>
         <a class="$LinkingMode" href="$Link" title="Go to the $Title.XML page">$MenuTitle<span></span></a>
         <% if Children %>
               <ul id="Sub-Menu">
                  <% control Children %>
                  <li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
                     <% if LinkingMode = current %>
                        <a class="items" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
                     <% else %>
                        <a class="item" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
			<% if Children %>
                        <ul id="Sub-Sub-Menu">
                           <% control Children %>
                              <li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode">$MenuTitle</a></li>
                           <% end_control %>
                        </ul>
                     	<% end_if %>
                     <% end_if %>
                  </li>
                  <% end_control %>
               </ul>
         <% end_if %>
      </li>
   <% end_control %>
</ul> 

Avatar
jbundy

Community Member, 8 Posts

6 January 2009 at 8:21am

Edited: 06/01/2009 8:23am

Nivanka -

Thanks for the quick response and all of the help.

Your new code addresses my second problem, but not the first (I can get them to display, but all of the #3 menu items are displayed when I select a #2 menu item). In fact, it is now displaying all #2 menu items as well (which it did not before).

Avatar
jbundy

Community Member, 8 Posts

8 January 2009 at 6:32am

I ended up figuring it out myself. Here is the code if anybody is interested...

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

<% else %>
<% if Children %>
<ul id="Sub-Menu">
<% control Children %>
<li class="$LinkingMode<% if FirstLast %> $FirstLast<% end_if %>">
<% if LinkingMode = current %>
<a class="items" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
<% if Children %>
<ul id="Sub-Sub-Menu">
<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode">$MenuTitle</a></li>
<% end_control %>
</ul>
<% end_if %>
<% else %>
<a class="item" href="$Link" title="Go to the $Title.XML page">$MenuTitle</a>
<% if LinkingMode = section %>
<% if Children %>
<ul id="Sub-Sub-Menu">
<% control Children %>
<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode">$MenuTitle</a></li>
<% end_control %>
</ul>
<% end_if %>
<% end_if %>
<% end_if %>
</li>
<% end_control %>
</ul>
<% end_if %>
<% end_if %>
</li>
<% end_control %>
</ul>

Avatar
TT

Community Member, 6 Posts

10 January 2009 at 11:24am

Edited: 10/01/2009 11:26am

Another way is using CSS hiding the navigation items not active

The template code:
<ul id="subNav">
<% control Menu(2) %>
<li class="$LinkingMode">
<a href="$Link" title="$Title.XML" class="$LinkingMode"><span>$MenuTitle</span></a>
<% if Children %>
<ul>
<% control Children %>
<li class="$LinkingMode">
<a href="$Link" title="$Title.XML" class="$LinkingMode"><span>$MenuTitle</span></a>
<% if Children %>
<ul>
<% control Children %>
<li class="$LinkingMode">
<a href="$Link" title="$Title.XML" class="$LinkingMode"><span>$MenuTitle</span></a>
</li>
<% end_control %>
</ul>
<% end_if %>
</li>
<% end_control %>
</ul>
<% end_if %>
</li>
<% end_control %>
</ul>

The css classes:
ul#subNav li ul {
display: none;
}

ul#subNav li.current ul,ul#subNav li.section ul {
display: block;
}

ul#subNav li ul li ul li {
display: none;
}

ul#subNav li.section ul li.current ul li,ul#subNav li.section ul li.section ul li {
display: block;
}

My page is not online yet so I'm not able to show you the result but it works :-)