Highlight Current Page in Horizontal Nav Bar

[Golf Tee Warehouse]

I am trying to implement a CSS horizontal navigation bar in a new website design.
I have managed to get the navigation bar in place and the hover state working (colour changes grom black to red when hovered over), but would like to get the colour to stay red when the page is selected/active. I can force the button red using class="current" (current is set in the actinic stylesheet to display the red background.

<a href="<actinic:variable name="InfoURL" />" target="_self" class="current"><actinic:variable name="InfoText" /></a>

What I have tried to do unsuccesfully is create a BlockIf statement that will only apply the

class="current"

when a particular page is active.
I have tried using the variable "PageType", which I can get to work for PageType = "Section" but not PageType = "Search" or PageType = "Terms And Conditions". I have also considered using the "PageTitle" variable.

What other variables could I use, or should I create my own variable. I have searched this forum, the knowledgebase and the help files.


The nav bar can be seen in Test Mode at: http://www.golfteewarehouse.co.uk/acatalog/test/

I am currently using the "Design Wizard" theme on V9

[Golf Tee Warehouse]

I seem to have it working for the "Search" button, but I am still not sure that "PageType" is the most suitable variable to use.

[bentleybloke]

Put the following in your blockif around class="current"

<actinic:variable name="SectionID" />==<actinic:variable name="MainSection::SectionID" />

This will help too: http://community.actinic.com/showthread.php?t=23159

[Golf Tee Warehouse]

Thanks for the suggestion.

I have tried just tried that without success and also tried

<actinic:variable name="SectionName" /> == <actinic:variable name="MainSection::SectionName" />

which I also could get to work.
I think perhaps this only works with product sections and not with brochure pages, etc I am trying to get it working with the sitemap, contact us form, etc.

It is getting late, I will have a read through a few of the previous discussions again.

[bentleybloke]

AAAAH! Brochure pages... try this in your blockif

(<actinic:variable name="BrochurePageID" /> == <actinic:variable name="MainBrochure::BrochurePageID" />)

[Golf Tee Warehouse]

Thanks again,

I have tried that but couldn't get it to work as it seemed to always be true and creat an always active condition.

I can get a few of them to work if I put the following code into the "Search CSS Button" Layout:

<actinic:variable name="PageType" /> == "Search"

This also works for the Terms and Conditions page and Search page as they have PageType of "Search", "Terms And Conditions" and "Contact Us", while the others are either "Section" or "Brochure". I will also be adding one or two extra buttons pounting to other brochure pages.

May be I need to investigate creating my own custom variables to identify each page, but would think each page must already have some unique ID that could be used, probably the BrouchurePageID you have suggested.

[bentleybloke]

In that case you'll have to create a variable settable on the brochure pages. Its covered in the link I gave you before except in that post it's called SectionNumber, but the same principle can be applied to the Brochure pages.

[leehack]

Why don't you show us the code you have implemented as you pair seem to be fumbling around like a pair of teenagers at the back of the picture house. To clarify you should be having a blockif around the whole of the class="current" and the blockif is fired by page type variable with page names typed identically as they are in the drop down box on design view. I also only use single, not double quotes.

[bentleybloke]

fumbling around like a pair of teenagers

I don't think Actinic is quite that enjoyable. Those were the days...

[leehack]

fumbling around like a pair of teenagers

I don't think Actinic is quite that enjoyable. Those were the days...

LOL with that i cannot disagree!

[Golf Tee Warehouse]

Thanks Lee, all now working.

Your solution was exactly as I had done it, althouh an extra " had slipped into the code for the "Site Map" button which stopped it working and I therefore assumed my use of PageType wrapping the class="current" was incorrect.

I have used

<actinic:variable name="PageType" /> == 'Brochure'

for the BlockIf condition in the "Home Page" CSS button
and

<actinic:variable name="PageType" /> == 'Section'

for the "Store Top/Products button"

Below shows the working and non-working code for the Sitemap CSS button Layout
Working Code:

<a href="<actinic:variable name="SiteMapPageURL" />" target="_self" <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Site%20Map%27" >class="current"</actinic:block>><actinic:variable name="SiteMapText" /></a>

Non-Working Code: (with extra quotes before the "SiteMapPageURL"

<a href="<actinic:variable name=""SiteMapPageURL" />" target="_self" <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Site%20Map%27" >class="current"</actinic:block>><actinic:variable name="SiteMapText" /></a>

I have recently upgraded from V7 so I am trying to learn CSS, layouts, Actinic Variables and Blocks and on a steep learning curve.
I think spending a couple of days trying to solve a problem like this one has been useful as I am starting to get my head around the basics of V9.
The next tweak will be the product section navigation in the left menu.