Author Options:

How to create selected state links? Answered

I want to know how to create a link that when clicked will turn a color and stay that color. For example, if you have a navigation bar on a website and each page had its own link, how could you make it so that if you were on the home page, the home page link would black and the rest of the links would be orange? If you were on the about page, the about page link would be black ans the rest of the links would be orange. 


gnoseon, I see you've been getting some help. I'm a developer as well and would recommend that you use stackoverflow.com for assistance. The site is your best bet for getting detailed help with your code (in any language).

All you need to do is signup for a user account (free) to post questions. But be aware of their "redundancy policy". Search first, before posting questions. If you post a question, include as much code and information as possible in order to get the best answer.

There is more than enough resources there to help you with this question and with the questions that may come up down the road.

Instructables is a GREAT resource and a fun site, but stackoverflow.com is specialized help for what you are doing.

This is pretty easy if you have a basic understanding of HTML pseudo-classes (mainly the a class)

This code mainly works for smaller websites (<10 pages). Anything much over 10 pages becomes really hard to work with and keep up with.

First, create styles for the links:

This creates code for two different styles of links- one that stays orange, and one that is black. Then you create the navbar links like so:

et. cetera.

These links have to be individualized for each page. So if I was on the About Us page, I would change it to this:

note that the Home page is now the plain class, but the about us page is now a different class.

Javascript is another solution to this that I know of, I just have not created a site large enough to need it yet.

BTW + FYI, this code validates under html5 specs, and uses the html5 NAV object.

I like this idea, but my pages are not separate. They are dynamically updated through PHP. This means that the About page is not in a directory like this:


it is a subset of the index page, like this:


I only have one menu bar, so I can't individualize the navigation bar for each page. If you could tell me about the JavaScript option, it might help. I have looked at a JQuery option here (coryschires.com), but I can't seem to get it to work.

In which case the menu is generated each time dynamically and the "current" CSS properties are applied to the appropriate part of the menu, depending on the page name that is fetched by the PHP ?GET function.

The menu isn't generated dynamically each time, it is part of index.php. The header and navigation bar stay put, but the page content is updated. Also, I don't know how to add PHP to a *.css file.

Example: Everything in green is fixed. the red is what updates.


Every time the content in the red box changes, you will need to reload index.php. There IS a way to only reload parts of pages using PHP but I've never used it because I've read everywhere that it's pants and easier to use Javascript. Because you're reloading each time you can do this....

$page = $_GET[0]; //this is to get the page from the URL

Then call a function to load the menu. It passes the function $page and the builds the menu. You don't put PHP in the .CSS file, that's not how it works. You have two CSS classes, one for the non-active pages and one for the active page. Your build_menu function loops through your list of pages, if it were a big menu it'd be stored in a database, and as it goes through the list of possible pages, if $menu_title == $page then you set the CSS properties to the active ones, else leave them default for the menu.

Reading back at what I just wrote it's a bit of a garbled mess, have a read then ask some more questions about it if it still doesn't make sense.

Oh and once you've had a go, if it still doesn't work put your index.php and main.css on www.pastie.org and PM me a link, then I can have a look at it without Instructables messing up the formatting :)

Sorry man, I dont know anything about PHP. I'm still learning.... but you might be able to find stuff in a few of the places on this search

In HTML it's the alink and vlink attributes.


<body link="#C0C0C0" vlink="#808080" alink="#FF0000">
  • link - standard link - to a page the visitor hasn't been to yet. (standard color is blue - #0000FF).
  • vlink - visited link - to a page the visitor has been to before. (standard color is purple - #800080).
  • alink - active link - the color of the link when the mouse is on it. (standard color is red - #FF0000).