Highlight current page in navigation menu

**djgriff** · 09-14-2009, 11:06 PM

I'm new to css and webpage design in general. I am trying to build a navigation menu that does the following; change white when hovered over and once you click on the link and get directed to the page, have that link be bold showing that you are on that page. This is what I have so far:

<style type="text/css">

</style>

I've attached Image1.jpg to show 'virtual tours' as being the current page. This navigation menu is a java script, but I'm trying to do this without java

**djgriff** · 09-15-2009, 12:56 PM

Anyone have any idea how to do this? If I understood all this code better I could probably piece together other posts and figure it out, but I'm just getting started. I'm reading up on CSS and HTML but haven't found a solution yet. I was thinking it would be the a:active command but that doesn't seem to go far enough. Any help would be appreciated. Thanks

**bluewalrus** · 09-15-2009, 01:01 PM

So the only thing your having a problem with is the current page being selected?

Code:

<style type="text/css">
<!--
A:link { color: #70241E }
A:visited { color: #70241E}
A:hover { color: #FFFFFF }
.active {font-weight:bold;}
-->
</style>

Code:

  <a href="test.html">TEST</a>
  <a href="test.html">TEST</a>
  <a class="active" href="test.html">TEST</a>
  <a href="test.html">TEST</a>
  <a href="test.html">TEST</a>
  <a href="test.html">TEST</a>

Then move the active to the current page in the menu bar. Unless the menu bar isn't static. In that case you would need to could make a php function that reads the address bar then outputs the class active into the appropriate link or maybe a javascript one but I'm not sure how to on the javascript.

**djgriff** · 09-15-2009, 09:31 PM

Thanks for the reply!!
I hope you have a little bit of patience left,,, but are you telling me that I put your portion of code (with test replaced with the Link.htmls on my page) within this other code, or after it?

**bluewalrus** · 09-15-2009, 10:13 PM

Within or put your code here and I'll show you what I mean, and tell me which page it is for.

**djgriff** · 09-15-2009, 11:03 PM

I'm not a real coder; I am building my first website for our family to sell my parents property after their deaths. I'm using Intuits 'SiteBuilder' program. The link to the website is http://www.wrighthouse4u.com. When the page comes up, click on the picture of the top house. I have a java script navigation menu on the left side which shows that you are currently at the 'Features' page. But if you scroll down to the linked text navigation menu on the bottom of the page the 'Features' text is not bold. I would like to be able to show this bold to correspond with whatever page you are on, just like the java script navigation menu does.
I have placed the code to show the linked text navigation menu as it currently shows on the webpage below. In SiteBuilder; they give me a little box to place the code in and says that this HTML will appear between the <HEAD> and <HEAD> tags for this page:

<style type="text/css">

</style>

**bluewalrus** · 09-16-2009, 02:31 AM

Okay so just give that the same class as the features on the side.

Thread: Highlight current page in navigation menu

Thread Tools

Search Thread

Highlight current page in navigation menu

The Following User Says Thank You to bluewalrus For This Useful Post:

The Following User Says Thank You to bluewalrus For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions