Jump to content

Archived

This topic is now archived and is closed to further replies.

Chappers

Menu link & current page highlighting help pls

Recommended Posts

Hi there

I'm using the following method of having the background of menu links change colour when the mouse is over the link, and of having a different colour text and background when the link refers to the current page:

Each page has:

[code]<?php $thisPage="home"; ?>[/code]

at the very top, where [i]home[/i] is replaced by a different name for each page.

The menu then has the links done like this:

[code]<td align="left">
<span<?php
if ($thisPage=="home")
echo " id=\"currentpage\"";
else
echo " id=\"menu\"";?>>
<a href="http://www.example.com/index.php">Home</a></span>
</td>[/code]

So if the current page is [i]home[/i], the span ID is currentpage for the following link. Otherwise it is given the [i]menu[/i] ID. The IDs are in the stylesheet thus:

[code]#menu a:link{
font:11px Verdana, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #788D9F;
text-decoration: none;
}
#menu a:visited{
font:11px Verdana, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #788D9F;
text-decoration: none;
}
#menu a:hover{
font:11px Verdana, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #CC2020;
text-decoration: none;
}

#currentpage a{
font:11px Verdana, Helvetica, sans-serif;
color: #788D9F;
background-color: #FFFFFF;
text-decoration: none;
}[/code]

And this all works a treat. The trouble is, I wish to have the whole TD in which the menu link is placed have a background colour which changes when the mouse is over the link. Ideally I could do with having the benefits of the stylesheet, so I can add borders, change text colour, etc., when a link is the current page or being highlighted by the mouse cursor being over it.

At the moment it looks a bit bare and odd having the background colour only behind the actual words of the menu link, especially as each link word is of a different length... looks a bit messy.

Any ideas how I could do this, or maybe there's a completely different method for all of the above that incorporates what I want to do?

Many thanks in advance.

Regards,
James

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.