Jump to:

5521 Posts in 1733 Topics by 1220 members

Customising the CMS

SilverStripe Forums » Customising the CMS » Sub Level Menu Problem

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

Page: 1
Go to End
Author Topic: 1851 Views
  • rach999
    Avatar
    Community Member
    4 Posts

    Sub Level Menu Problem Link to this post

    Hi All,

    Having trouble with my code.

    Here is my menu

    <% if Menu(1) %>
    <ul class="firstLevel">
    <% control Menu(1) %>
    <li><a href="$Link" title="$MenuTitle" class="$LinkingMode">$MenuTitle</a>

    <% if LinkOrSection = section %>
    <ul class="secondLevel">
    <% control Children %>
    <li class="$LinkingMode <% if FirstLast %>$FirstLast<% end_if %>">
    <a href="$Link" title="$MenuTitle" class="$LinkingMode">$MenuTitle</a>
    <% if LinkOrSection = section %>
    <ul class="thirdLevel">
    <% control Children %>
    <li class="$LinkingMode <% if FirstLast %> $FirstLast<% end_if %>">
    <a href="$Link" title="$MenuTitle" class="$LinkingMode">$MenuTitle</a>
    </li>
    <% end_control %>
    </ul>

    <% end_if %>

    </li>
    <% end_control %>
    </ul>
    <% end_if %>

    </li>
    <% end_control %>
    </ul>
    <% end_if %>

    problem is first level all good, and second, but when i got the the third level it uses second level class not third.

    heres my style

    .firstLevel li {
                float:left;
                border-top:1px solid #70a2f9;
                border-bottom:1px solid #70a2f9;
                background-color:#488bf9;
             }
                .firstLevel li.current,
                .firstLevel li.section {
                   
                   background-color:#6da2f7;
                }
                .firstLevel li a {
                   display:block;
                   color:#ffffff;
                   width:180px;
                   font-weight:normal;
                   font-size:1.4em;
                   text-decoration:none;
                   padding:10px 10px 10px 10px;
                   background-color:#488bf9;
                   background-image: url(../images/navigation.png);
                }
                   .firstLevel li a:hover {
                      color:#488bf9;
                      background-image: url(../images/navigation_hover.png);
                   }
                   
                   .firstLevel li.current a,
                   .firstLevel li.section a {
                      color:#edecf7;
                      background-image: url(../images/navigation_curr.png);
                      
                   }

    .secondLevel li {
                float:left;
                background-color:#6da2f8;
                border-bottom:1px solid #70a2f9;
                border-top:1px solid #70a2f9;
             }
                
                   
                   .secondLevel li.current     {
                   color:#e1e1d5;
                   background-image: url(../images/navigation_third.png);}
                   
                   
                   .secondLevel li.section {
                   color:#e1e1d5;
                   background-image: url(../images/navigation_third.png);}
                   
                   
                
                .secondLevel li a {
                   display:block;
                   width:180px;
                   color:#fff;
                   font-weight:normal;
                   font-size:1.2em;
                   text-decoration:none;
                   padding:10px 10px 10px 10px;
                   background-image: url(../images/navigation_sec.png);
                }
                   .secondLevel li a:hover {
                      color:#fff;
                      background-image: url(../images/navigation_sec_hover.png);
                      }
                   
                   .secondLevel li.current a    {
                   color:#e1e1d5;
                   background-image: url(../images/navigation_sec_curr.png);}
                   
                   
                   .secondLevel li.section a {
                   color:#e1e1d5;
                   background-image: url(../images/navigation_sec_curr.png);}
                   
    .thirdLevel li {
                float:left;
                background-image: url(../images/navigation_third.png);
                border-bottom:1px solid #70a2f9;
                border-top:1px solid #70a2f9;
             }
                .thirdLevel li.current,
                .thirdLevel li.section {
                   
                background-image: url(../images/navigation_third.png);
                }
                
                .thirdLevel li a {
                   display:block;
                   width:100px;
                   color:#fff;
                   font-weight:normal;
                   font-size:1.1em;
                   text-decoration:none;
                   padding:10px 10px 10px 10px;
                   background-image: url(../images/navigation_third.png);
                }
                   .thirdLevel li a:hover {
                      color:#fff;
                      background-image: url(../images/navigation_third.png);
                      }
                   
                   .thirdLevel li.current a,
                   .thirdLevel li.section a {
                   color:#e1e1d5;
                   background-image: url(../images/navigation_third.png);}

    any help would be greatly appreciated.

    THANKS

  • CodeGuerrilla
    Avatar
    Community Member
    105 Posts

    Re: Sub Level Menu Problem Link to this post

    You are inside Menu(1) control I don not believe you can control Children of Children, I would seperate the controls out or at least the 3rd level you could try something like (untested):

    <% control Menu(1) %>

    ...

    <% end_control %>

    <% control Menu(2) %>

    ...

    <% control Children %>
    ...
    <% end_control %>

    <% end_control %>

    or

    <% control Menu(1) %>

    ...

    <% control Children %>
    ...
    <% end_control %>

    <% end_control %>

    <% control Menu(3) %>

    ...

    <% end_control %>

    If that doesn't work then just control Menu(1) with the nested Children control and write a custom function in yopur controller to get the third level good luck!

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