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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Active Pages


Go to End


2 Posts   2250 Views

Avatar
Marlie511

Community Member, 36 Posts

18 March 2010 at 3:49am

Edited: 18/03/2010 4:07am

Please take a look at my screen shot, it shows what I would like to have happen on my web site with the navigation.
Can help me come up with some code that would show the Top navigation (menu 1) be highlighted when it's child (menu 2) is selected and active/current?

This seemed easy, but the code I found here: http://doc.silverstripe.org/doku.php?id=built-in-page-controls
didn't help me. My top navigation (menu 1) uses a tab look made up of a background image that is located in my css/typography.css

.typography ol span { color: #666666; }
/* menu tabs */
.typography #header a {
float:left;
background: url(../images/tableft.png) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
.typography #header a span {
float:left;
display:block;
background: url(../images/tabright.gif) no-repeat right top;
padding:6px 5px 3px 8px;
color: #FFF;
}

.typography #current a {
float:left;
background: url(../images/tableft.png) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

.typography #current a span {
float:left;
display:block;
background: url(../images/tabright.gif) no-repeat right top;
padding:6px 5px 3px 8px;
color: #FFF;
}

--------------------------------------------------------
Currently, this is the code in my Includes/Navigation.ss file

<ul>
<% control Menu(1) %>
<li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><span>$MenuTitle</span></a></li>

<% end_control %>
</ul>

Attached Files
Avatar
Willr

Forum Moderator, 5523 Posts

18 March 2010 at 12:05pm

For the nav 1 you want to use the $LinkOrSection var like class="$LinkOrSection". It returns 'section' if you are on the page or a child page. 'link' otherwise.

For the nav 2 you can just use the $LinkingMode and style the .current class.