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   1940 Views

Avatar
rach999

Community Member, 4 Posts

9 January 2010 at 11:06pm

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

Community Member, 105 Posts

14 January 2010 at 7:33pm

Edited: 14/01/2010 7:34pm

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!