View Full Version : How to highlight current page on menu tab?

Jul 8th, 2010, 03:00 AM

I've been searching on ways on how to highlight the current page on my menu tab if you use images for your menu links.

I used a different hover image, and would like to keep the hover image if they are on that current page.

Any tips would be much appreciated! Thanks!

Here's the site: http://www.stubborneve.com

Here's my code for the menu:

<!-- Hide from older browsers

var first_off = new Image();
first_off.src = "{{ 'hometab.jpg' | asset_url }}";
var first_on = new Image();
first_on.src = "{{ 'homehover.jpg' | asset_url }}";

var second_off = new Image();
second_off.src = "{{ 'publictab.jpg' | asset_url }}";
var second_on = new Image();
second_on.src = "{{ 'publichover.jpg' | asset_url }}";

var third_off = new Image();
third_off.src = "{{ 'promotab.jpg' | asset_url }}";
var third_on = new Image();
third_on.src = "{{ 'promohover.jpg' | asset_url }}";

var fourth_off = new Image();
fourth_off.src = "{{ 'hertab.jpg' | asset_url }}";
var fourth_on = new Image();
fourth_on.src = "{{ 'herhover.jpg' | asset_url }}";

var fifth_off = new Image();
fifth_off.src = "{{ 'helptab.jpg' | asset_url }}";
var fifth_on = new Image();
fifth_on.src = "{{ 'helphover.jpg' | asset_url }}";

var sixth_off = new Image();
sixth_off.src = "{{ 'carttab.jpg' | asset_url }}";
var sixth_on = new Image();
sixth_on.src = "{{ 'carthover.jpg' | asset_url }}";

function activate(imgName) {
if ( eval(imgName + "_on.complete") ) {
document.images[imgName].src = eval(imgName + "_on.src");

function deactivate(imgName) {
if ( eval(imgName + "_off.complete") ) {
document.images[imgName].src = eval(imgName + "_off.src");

// End script hiding -->

<div id="menu">
<A HREF="/" title="Go to frontpage" onMouseOver="activate('first')" onMouseOut="deactivate('first')"><IMG SRC="{{ 'hometab.jpg' | asset_url }}" BORDER="0" NAME="first" alt="HOME"></A>
<A HREF="/blogs/publiccity" title="Press & Media" onMouseOver="activate('second')" onMouseOut="deactivate('second')"><IMG SRC="{{ 'publictab.jpg' | asset_url }}" BORDER="0" NAME="second" alt="PUBLIC CITY"></A>
<A HREF="/blogs/promo" title="Promos & Offers" onMouseOver="activate('third')" onMouseOut="deactivate('third')"><IMG SRC="{{ 'promotab.jpg' | asset_url }}" BORDER="0" NAME="third" alt="PROMO"></A>
<A HREF="/pages/herstory" title="Know more about Stubborn Eve" onMouseOver="activate('fourth')" onMouseOut="deactivate('fourth')"><IMG SRC="{{ 'hertab.jpg' | asset_url }}" BORDER="0" NAME="fourth" alt="HER STORY"></A>
<A HREF="/pages/help" title="Shopping Guidelines" onMouseOver="activate('fifth')" onMouseOut="deactivate('fifth')"><IMG SRC="{{ 'helptab.jpg' | asset_url }}" BORDER="0" NAME="fifth" alt="HOW TO ORDER"></A>
<A HREF="/cart" title="View Your Selected Items" onMouseOver="activate('sixth')" onMouseOut="deactivate('sixth')"><IMG SRC="{{ 'carttab.jpg' | asset_url }}" BORDER="0" NAME="sixth" alt="YOUR SHOPPING BAG"></A></h2>

Major Payne
Jul 8th, 2010, 08:06 AM
Can't you use 3-images for the menu? One image for the page you are on can be called for that page only with the common mouseon image. It can be made to be highly different from the others to show it has been selected. I used that scheme on some pages along with a preloader, but you have lots of coding and keeping track of which image goes where. Naming them so you can recognize which is which is a must.

Jul 8th, 2010, 09:38 AM
Well its pretty simple.

Add an id to the current page link(you can do that manually while creating the page) called #active and style that id in css as same as hover.

Also if you want to make the current page link disable, so it is not clickable.

Here's the css code
#active { pointer-events: none; cursor: default; background: same as hover image; }

Just make sure the specificity of #active is more than the hover class

Jul 8th, 2010, 09:59 AM
Here's my code for the menu: Using javascript to make the hover/rollover effect is not a good practice as it won't do anything for users who have no js support in their browser or who've blocked js. I'd recommend to use a CSS based one instead. Look into http://www.google.com/search?q=css+image+rollover+menu (and it'll be easier to "show" the selected item using CSS than js )

Jul 8th, 2010, 02:02 PM
As abduraooft suggests use CSS instead of javascript for your hover/rollover effect.

As wp-coder you can mark your current page in the menu with an id of say "active".

However I would advise against doing this manually - it will be a maintenance nightmare.

The best ways of writing different code for your current page (be it id="active" or any other method) is to use a server side script (such as PHP) or an html pre-processor (such as PPWizard).

A second best would be to use Javascript. Set up a standard menu to use on all pages. The standard menu will work on all pages, it just won't distinguish the current page from any other. Use Javascript to loop through the links in the menu and check if the link is to the current page, if so modify. The enhanced menu will be shown to the majority who have Javascript enabled, and a workable menu will be shown to the minority who do not.

Jul 8th, 2010, 03:25 PM
You could try this method, I user a similar method but without images here:
www.filthybeast.co.uk (http://www.filthybeast.co.uk) Don't worry about the name, it is an old rock band.

I'm sure I originally picked up the code on this forum but a quick search couldn't find it.

First give each page's body an ID


{whatever your code for body was goes here}

Then create a state to highlight the menu link when you are on that page

body#home a#home-nav,
body#page1 a#page1-nav,
body#page2 a#page2-nav
background: #ccc url(your path to the hover image) repeat:none;
border: 1px solid #foo;
(I would add something else like the red border so that it is clearly not the hover or focus state)

Your html

<li class="a"><a id="home-nav" href="index.html" title="Your Home Page Title">Home</a> </li>
<li class="a"><a id="page-1-nav" href="page1.html" title="Page1 Title">Page1</a> </li>
<li class="a"><a id="page2-nav" href="page2.html" title="Page2 title">Page2</a> </li>

Jul 8th, 2010, 05:55 PM
Thanks for the tips, I'll look into this. I just know basic html and css, and no idea about scripts. I just got my hover code on some tutorial on the net.

So thanks for all your input. Much appreciated!