Selected Pages – an answer for Beal

In December Beal asked a question in response to my piece on the Natures Carpet site:

How did you make the current page appear selected? I used the include function (leftover from Frontpage) because I didn’t want to make a separate nav for each page. I’d like to have the current page selected in the nav, but I didn’t know how to do it with include.

Sorry for taking so insanely long to answer (I’ve been busy redesigning Dabbler.ca) but here it is:

#nav p a {
color: #A59B8B;
letter-spacing: 0.15em;
padding-right: 8px;
border-right: 10px;
border-right-style: solid;
border-right-color: #ffffff;
text-decoration: none;
}

#nav p a:hover {
color: #A59B8B;
text-decoration:none;
padding-right: 8px;
border-right: 10px;
border-right-color: #d1cac2;
border-right-style:solid;
}

I used two pieces of code to make the current page appear selected in the menu on the NaturesCarpet.com site. I have no idea what this technique is called but it’s pretty self explanatory:

The regular unselected menu items (main items – the child items are slightly different) look like this in the CSS code:To make the current page appear selected I had to make the non-active current page link look like the a:hover stage. To do that I first assigned a name to each page like this:

Then I gave each of the buttons an id:

BENEFITS

PRODUCTS
HOW WE MAKE IT

RETAILERS

FAQ

ABOUT US

CONTACT

LINKS

and finally I set up a specific style in the CSS for the current page set:

body#howto a#howtonav {
color: #A59B8B;
text-decoration:none;
padding-right: 8px;
border-right: 10px;
border-right-color: #d1cac2;
border-right-style:solid;
}

What happens here is the buttons are styled based on the body id so that when you are in the howto page, the howtonav style kicks in and overrides the standard p style.

I’m sure there are other (and possibly better) ways of doing this but for my purposes it worked perfectly. It also gives you the ability to individually style each current page link if you so desire.

To see the code in action, visit NaturesCarpet.com