...

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



mbe
07-08-2010, 03:00 AM
Hi,

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:

<SCRIPT LANGUAGE="JavaScript">
<!-- 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 -->
</SCRIPT>


<div id="menu">
<h2>
<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>
</div>

Major Payne
07-08-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.

wp-coder
07-08-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

abduraooft
07-08-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 )

mbaker
07-08-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.

Donkey
07-08-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

e.g.

body,
body#home,
body#page1,
body#page2
{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


<ul>
<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>
<ul>

mbe
07-08-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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum