Jump to:

3439 Posts in 1028 Topics by 869 members

Template Questions

SilverStripe Forums » Template Questions » 3rd level menu display issues

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

Page: 1
Go to End
Author Topic: 3223 Views
  • jbundy
    Avatar
    Community Member
    8 Posts

    3rd level menu display issues Link to this post

    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/

  • Nivanka
    Avatar
    Community Member
    395 Posts

    Re: 3rd level menu display issues Link to this post

    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>

  • jbundy
    Avatar
    Community Member
    8 Posts

    Re: 3rd level menu display issues Link to this post

    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).

  • jbundy
    Avatar
    Community Member
    8 Posts

    Re: 3rd level menu display issues Link to this post

    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>

  • TT
    Avatar
    Community Member
    6 Posts

    Re: 3rd level menu display issues Link to this post

    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

    3223 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.