Question

I’m just trying to create a simple menu. So when you click a link, it directs you to another page and shows you that you selected that link by changing colour.

The problem I have is when I click a link within the list, the page loads and for some reason the list elements all enter the a:visited field. Setting them to red. I have the JSFIDDLE Here. I know its simple but it’s getting on my nerves.

CSS Code:

ul.nav_style{list-style: none;}

ul.nav_style li {padding-left: 1em; text-indent: -.7em;}

ul.nav_style li:before {
    content: "•  ";
    color: #C0C0C0; /* or whatever color you prefer */
}

ul.nav_style li a:link { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:visited { color: #FF0000; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}​

HTML Code:

<ul class="nav_style">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

Thanks in advance.

Chris

Answer 1

Problem solved, I’ve decided to just use PHP to generate my lists using arrays and an if statement to give the current page its css class.

PHP CODE:

if($title == "Enter"){

              $enterArrayPages = array("competition.php","full_detail.php", "judges.php", "get_involved.php", "employers.php");
              $enterArrayText = array("The Competition","Full Detail","The Judges","Get Involved", "Employers");

              echo '<ul class="nav_style">';
              for($i=0; $i<sizeof($enterArrayPages); $i++){

                if($proper_title == $enterArrayText[$i]){
                  echo '<li><a class="linkChange" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
                }
                else{
                  echo '<li><a class="menu_links" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
                }
              }
              echo '</ul>';
            }

So as you can see, the code loops through each of the pages stored in an array and if the title of the page is equal to the one in the array I change its class, making the color of the link different to the others.

Here is the CSS:

a.menu_links:link { color: #58595B; text-decoration: none;}
a.menu_links:visited  { color: #58595B; text-decoration: none; }
a.menu_links:active { color: #E6BD13; text-decoration: none; }
a.menu_links:hover  { color: #E6BD13; text-decoration: none; }

.linkChange {
   color: #E6BD13;
   text-decoration: none;
}

It’s really simple, I just had to think of the logic via PHP. I thought that implementing it in pure css would be good enough, but with time ticking, I resorted to PHP.

Here is an image of the code output:

Thanks for everyones comments! Much appreciated!