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.

Archive /

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

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

Mini-tabs menu - current highlighted problem


Go to End


1590 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