Jump to:

17488 Posts in 4473 Topics by 1978 members

Archive

SilverStripe Forums » Archive » Menu: How to add a third level?

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

Moderators: martimiz, Howard, Sean, Ryan M., biapar, Willr, Ingo, simon_w

Page: 1
Go to End
Author Topic: 2226 Views
  • u_marvin
    Avatar
    Community Member
    3 Posts

    Menu: How to add a third level? Link to this post

    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>

  • artlung
    Avatar
    Community Member
    10 Posts

    Re: Menu: How to add a third level? Link to this post

    10 October 2008 at 4:35am Last edited: 10 October 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>

  • u_marvin
    Avatar
    Community Member
    3 Posts

    Re: Menu: How to add a third level? Link to this post

    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!

  • jest
    Avatar
    Community Member
    6 Posts

    Re: Menu: How to add a third level? Link to this post

    10 October 2008 at 12:00pm

    Hey thanks artlung,

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

  • u_marvin
    Avatar
    Community Member
    3 Posts

    Re: Menu: How to add a third level? Link to this post

    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!

  • SalvaStripe
    Avatar
    Community Member
    89 Posts

    Re: Menu: How to add a third level? Link to this post

    11 December 2008 at 3:06am Last edited: 11 December 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>

  • SalvaStripe
    Avatar
    Community Member
    89 Posts

    Re: Menu: How to add a third level? Link to this post

    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^^

  • artlung
    Avatar
    Community Member
    10 Posts

    Re: Menu: How to add a third level? Link to this post

    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;
    })

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