Jump to content


Photo

Menu link & current page highlighting help pls


  • Please log in to reply
No replies to this topic

#1 Chappers

Chappers
  • Members
  • PipPipPip
  • Advanced Member
  • 119 posts

Posted 05 July 2006 - 01:43 AM

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:

<?php $thisPage="home"; ?>

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

The menu then has the links done like this:

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

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

#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;
}

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users