Change the color of a navigation link

HTML & CSS
1

I have tried doing this with css and it does not work. Let’s say I have five links in a list format. I would like to have a hover effect and then when I choose and click a link, I want it to change color (red) so a visitor knows that is the link for the corresponding page. When another link is clicked, the previous one reverts back to the same color as the other unclicked links and the newly chosen link changes color (red).

I have searched for literally hours and found numerous snippets of code and tried them all to no avail. I do not know javascript so I would greatly appreciate no abbreviated code as I can’t do anything with it. I realize forums are to get people to think, however I am just about brain dead over this one.

Any help will be greatly appreciated…Happy Holidays

2

That’s pretty simplistic to do actually. One way you could do it, is when one of the <li>s is clicked, the first thing you do is run a function that loops through all of the <li>s and resets them back to their original color. The second function you run is setting the active <li> that’s just been clicked.

3

See: Including Navigation Code On All Pages (Even With Current Navigation Highlighting!)
Current Nav Highlighting: Using PHP to Set the Body ID (video)


<body id="contact">



<ul id="nav">
    <li><a class="contact" href="contactus.html"></li>
    ...



#contactus .contactus {
    ...
}
4

I can imagine it would be simple for someone who knows javascript…however I do not so there in lays the lack of simplicity. I am after the code and corresponding html. I do appreciate your reply. I know there is something out there as I have seen it on websites but am unable to get the code as I am thinking it was in an external script otherwise I would have grabbed it off the site.

5

Okay, hold on there, let’s slow down a bit and understand the situation.
The technique I gave requires absolutely no javascript at all. It doesn’t get much simpler than that.

That would be the web page that I linked to at the start of my post.
Here it is again: Including Navigation Code On All Pages (Even With Current Navigation Highlighting!)

For further implementation details, please read section 10 of the following article, which provides all that you need in terms of the CSS code and corresponding HTML.
My Top Ten CSS Tricks by Trenton Moss

Edit:

It appears that soapbunny’s post was directed at a different person. We can leave things where they currently stand.

6

I think soap bunny’s reply was directed toward me pmw.

I misinterpreted the post, I was thinking that he wanted to remain on the same page while clicking on the <li>s, but since each time the page is redirected to a new one that opens up a bunch of options for him.

7

PMW, Yes my reply was to the young man who first answered. I am so freaking tired right now but will give this a shot in the morning. Nicely done…thanks and have a good holiday season…

8

Okay call me stupid but I tried this and it did not change the color of the link.

This is the css code and I really have no idea if this is even right as there were no examples of what code to use…do I use anchor tags or not???

ul#nav
{
list-style: none;
font-family: Arial, Helvetica, sans-serif;
margin: 15px 0 0 0;
padding: 0;
color: red;
font-size: 80%;
}

#it_in .it_in {
display: block;
width: 180px;
height: 27px;
padding: 10px 3px 6px 1.5em;
color: #03C;
text-decoration: none;
font-size: 80%;
}

9

For some context, what is the HTML code for your navigation menu?

10

<ul id=“nav”>
<li><a href=“it_infrastructure.php”>INTERNAL NETWORK CONNECTIVITY</a></li>
<li><a href=“internet_connectivity.php”>INTERNET CONNECTIVITY - INSIDE THE OFFICE</a></li>
<li><a href=“internet_connectivity_outside.php”>INTERNET CONNECTIVITY - OUTSIDE THE OFFICE </a></li>
<li><a href=“network_hardware.php”>NETWORK HARDWARE</a></li>
<li><a href=“computer_hardware.php”>COMPUTER HARDWARE</a></li>
<li><a href=“peripheral_hardware.php”>PERIPHERAL HARDWARE</a></li>

</ul>

11

I tried it but the links did not change color at all and only one link on each page changed to fit the new css, the rest went to default. It seems to me that if you change the body tag to include a specific id then anything else on that page that does not match will not change…at least tha’s what happened here. I converted 2 links and only one took the css format. But no color change. I now it’s my css but in the article it says css stylings, but because this is differnet I was not sure if I had to use anchor tags.

12

I know there is some javascript to do this…anyone???

13

Step 1. Add a unique class name to the section you want to be used for highlighting. That could be the li element, or it could be the anchor element.

Here is how one of the list items would look with a unique class names on the anchor element:


<li><a class="inside_con" href="internet_connectivity.php">INTERNET CONNECTIVITY - INSIDE THE OFFICE</a></li>

Step 2: Target only one of those class names on the page.

When the internal connectivity page loads, the CSS for that page need to know which one of the navigation class names to highlight.

You use a unique identifier on the body element to provide that information


<body id="internal_conn">

Step 3: Use the body identifier to activate the navigation class for the current page:


#internal_conn .internal_conn {

}

You want to use exactly the same CSS code on each page for the currently active navigation link, so each and every page requires placing an identifier on its body, to indicate which part of the navigation that page belongs to.

After a while, you end up with this CSS:

#infrastructure .infratructure,
#internal_conn .internal_conn,
#external_conn .external_conn,
#network_hardware .network_hardware,
#computer_hardware .computer_hardware,
#peripheral_hardware .peripheral_hardware {
    ...
}

So that when you are on the page with the body id set, the appropriate item in the navigation list is shown as the active link.

14

There is no javascript involved to achieve this.

I’m moving this thread where it belongs, to the CSS forum.

15

I’m not really a fan of this css method pmw is suggesting. What if he wants to change the page name or add another page or delete a page? There seems to be too much manual labor involved when you can manipulate it with php…

16

PHP manipulation is certainly an option. Won’t changing page names or adding/deleting pages also require changing the PHP code too though?

17

If I recall correctly, no. I remember working on something like this before, but I built the page differently, all the nav links were built in php, I think I made the nav links based on filename and appended something to the filename. Like filename . “navBarMain”. And if the name was the current file I made that one have the active class. I may have done it differently, but something like that.

18

Yes, that is a useful technique. If you’re only dealing with the main nav section, and not sub-sections, then you can have PHP set an active class on the section that links to the page that matches the current page.

That’s a clever solution.

How do you feel about guiding the OP towards that solution?

19

I’m thinking about and working on it atm, but didn’t want to make the op any promises since I’m basically just doing this for fun and theres only x amount of time I have for recreational purposes. :slight_smile:

20

If the OP decides to go with the PHP solution, instead of the existing CSS one, we really should move this thread to a more appropriate location :slight_smile: