Jump to content

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
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.