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.

Customising the CMS

Sub Level Menu Problem


Reply

2 Posts   1887 Views

Avatar
rach999

9 January 2010 at 11:06pm Community Member, 4 Posts

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

Avatar
CodeGuerrilla

14 January 2010 at 7:33pm (Last edited: 14 January 2010 7:34pm), Community Member, 105 Posts

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!