Forum Moderators: open

Message Too Old, No Replies

Navigation Menu Current Page Background Color

         

Rain_Lover

11:20 am on Apr 23, 2010 (gmt 0)

10+ Year Member Top Contributors Of The Month



Hi,

I created a simple menu:

<html> 

<head>
<style type="text/css">
table {width:400px;height:35px;border-collapse:collapse;border:1px solid #000}
td {text-align:center;padding:3px;cursor:pointer;font:bold 12px Verdana;color:#FFFFFF;background-color:#555}
</style>
</head>

<body>
<table border="1" bordercolor="#000">
<tbody>
<tr>

<td onClick="parent.location='home.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Home</td>

<td onClick="parent.location='news.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">News</td>

<td onClick="parent.location='articles.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Articles</td>

</tr>
</tbody>
</table>
</body>

</html>



Was wondering if you knew of a way to keep the button on the mouse-over style for as long as a user is on the page they clicked. This would mean that if a user clicked on a page named 'News', the 'News' button would stay in the mous-over style to indicate which page they were on.


Regards
Rain Lover

whoisgregg

5:20 pm on Apr 24, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld, Rain_Lover!

If you wanted to do this with JavaScript, you could check the current value of location.href and highlight the correct button on page load.

However this is typically done on the server side. You just add a 'class="current"' on the button for the section of the site the user is currently in.

Rain_Lover

8:21 pm on Apr 25, 2010 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks for the answer! However, I'm not good at coding. Would you please provide the final embed codes?