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.

General Questions /

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

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

Active Pages


Reply


2 Posts   1307 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, 5513 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.