Hi Again,

I have now changed my code creating a vertical menu which expands to the side. It all works fine apart from the top level of navigation which doesnt seem to pick up the style?

This is the .ss code:

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

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

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

<% if LinkOrSection = section %>
<ul>
<% 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 %>

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

Because the top level of the nav has link which drop to a sub level I need the .ss to pick up on that but I am unsure of how to change the .ss? At the moment the first level links are without a class at all then the second level picks up fine?

Any help would be great!

Thanks

Rachael

Hi Rachael,

Welcome to SilverStripe.
I guess you're referring to this post.

As you're talking about styles, I do think this is all about CSS.
And as you modified some of the .ss, I'm pretty sure you also modified the .css.
If not: you should.

With as little information as I have, I'd say: make things easy for yourself and add some classes to you're firstlevel.

PS1 If you reply to an old post, you'll bump it; that way it is easier for you're helpers to find out what you're trying to do.
PS2 In SilverStripe 'CMS' means the backend (and mainly the code behind the backend). You're working on template-level, which has to do with how the frontend appears to your visitors. I'm pretty sure I made those mistakes in the beginning. But hey we're here to learn :)

Hello,

I have changed my navigation to a flyout menu now. Which is showing the first two levels of the navigation. Unfortunately I can not get it to show more than that? I have tried changing all my children controls without any luck.

This is my full sidebar nav:

<div id="NavWhite">
<div id="NavHold" class="menu">

<ul>
<% control Menu(1) %>
<li><a class="$LinkingMode" href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a>
<% if Children %>
<ul>
<% control Children %>
<li class="$LinkingMode"><a href="$Link" title="Go to the $Title page">$MenuTitle</a></li>
<% end_control %>
</ul>
<% end_if %>
</li>
<% end_control %>
</ul>

<div id="SearchHold">$SearchForm</div>
</div>
</div>

Does anyone know what i need to add to this to show my third and fourth level of sub categories? A link to a tutorial would be great even. I would appreciate someone explaining what the above is doing so i can understand this more and then work it out for myself. I got this far. :)

Here is my .css

I can't see any problems in here that would effect my other sub levels but let me know if you do! (ignore images i have used they are all the same at the moment.)

#menu {font-family: arial, sans-serif; width:190px; margin:0; font-size:14px;}
.menu ul li a, .menu ul li a:visited {
display:block; text-decoration:none; color:#fff; width:190px; height:20px; text-align:left; border-top:1px solid #fff; border-bottom:1px solid #fff;
background-image: url(../images/navigation1.png); line-height:19px; font-size:14px; padding:10px 0px 10px 10px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background-image: url(../images/navigation1_hover.png);}
.menu ul li:hover ul {display:block; position:absolute; top:-84px; left:200px; width:190px;}
.menu ul li:hover ul li a.hide {background-image: url(../images/navigation1_hover.png); color:#000;}
.menu ul li:hover ul li:hover a.hide {width:190px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background-image: url(../images/navigation1.png); color:#fff; width:190px;} /* second level bg*/
.menu ul li:hover ul li a:hover {background-image: url(../images/navigation1_hover.png); color:#fff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:200px; top:0; color:#fff;}
.menu ul li:hover ul li:hover ul li a {display:block; width:190px; background-image: url(../images/navigation1_curr.png); color:#fff;}
.menu ul li:hover ul li:hover ul li a:hover {background-image: url(../images/navigation1_hover.png); color:#fff;}

If I could understand the workings a bit better with some help im sure i can work it out.

Thanks

Rachael

Hi

Avoid controling children in this case. instead of that use.

you have two choices.
1. Menu. ....global scope
2. Level ....local scope

<% control Menu(x) %> 
or

<% control Level(x) %> 

where x is the level you want to control.

ta

Hey do you guys know of any tutorials for how to add Mega drop down menus (for navigation).....and have the content controlled through SS? Thank you....