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.

Archive /

Our old forums are still available as a read-only archive.

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

Mini-tabs menu - current highlighted problem


Reply


1262 Views

Avatar
sammahoney

Community Member, 14 Posts

3 June 2008 at 5:49am

Edited: 03/06/2008 5:58am

Hi All

I've just installed SilverStripe after checking about 15 different CMS systems over the last few months, and I've definitely found what I was looking for. Took me 10 mins to set up a simple site, as opposed to trying to hack templates for a week before giving up...so big big up to the developers...

Anyhow, just one thing I'm having trouble with. In the navigation menu, I read in the tutorial how to set it to show the current page, but I'm trying to fit that to the 'Mini Tabs Menu' (http://www.frequency-decoder.com/demo/animated-minitabs/).

It's highlighting the current page as it loads, but then when everything is loaded it goes back to the first entry in the menu.

My 'Navigation.ss' code is as follows:

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

And the CSS for the menu is:

#miniflex {
width: 100%;

      text-align: right;
font-size: small; /* could be specified at a higher level */
margin: 0;
padding: 0px 0px 0 10px;
border-bottom: 0px solid #696;
position:relative;
z-index:2;
}

#miniflex li {
float: left;
margin: 0;
padding: 0;
display: inline;
list-style: none;
position:relative;
}

#miniflex a:link, #miniflex a:visited {
float: left;
font-size: 12px;
      font-family: Arial, Verdana, sans-serif;
line-height: 20px;
margin: 0 10px 0 15px;
      letter-spacing: 1px;
text-decoration: none;
color: #ffffff;
      background: none;
}

#miniflex a.current:link, #miniflex a.current:visited, #miniflex a:hover {
border-bottom: 6px solid #C3D020;
padding-bottom: 2px;
color: #ffffff;
}

#animated-tab {
position: absolute;
z-index: 1;
font-size: 85%;
line-height: 14px;
padding-bottom: 10px;
border-bottom: 6px solid #C3D020;
}
br
{
clear:both;
}

Any ideas? The site is viewable at http://host.qsoftdns.net/~divinemo/silverstripe/reservations