Results 1 to 7 of 7

Thread: Highlight current page in navigation menu

  1. #1
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Highlight current page in navigation menu

    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">
    <!--
    A:link { color: #70241E }
    A:visited { color: #70241E}
    A:hover { color: #FFFFFF }
    -->
    </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

  2. #2
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

  3. #3
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    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.

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

    djgriff (09-15-2009)

  5. #4
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #5
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

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

  7. #6
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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">
    <!--
    A:link { color: #70241E }
    A:visited { color: #70241E}
    A:hover { color: #FFFFFF }
    A:active { color: #70241E ;
    font-weight:bold}
    -->
    </style>

  8. #7
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

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

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

    djgriff (09-16-2009)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •