Welcome to WebmasterWorld Guest from 52.206.226.77

Forum Moderators: not2easy

Message Too Old, No Replies

Navigation menu active list item

     
4:56 am on Aug 3, 2005 (gmt 0)

New User

10+ Year Member

joined:Aug 3, 2005
posts:2
votes: 0


Hello. I'm brand new to CSS and have been playing with navigation menus this evening. Everything looks great, but I would like to know how to make the active list item text to be (say) in a different color.

I've read some articles but I can't get to get things to work...

Here is my code for the menu:

#navlist {
position: fixed;
/*left: 36px;
top: 86px;*/
left: 0px;
top: 0px;
width: 186px;
}
#navlist ul {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
cursor: default;
display: inline;
list-style-type: none; /*turns off display of bullet*/
font-size: .9em;
}
#navlist li {
margin: 0;
}
#navlist a {
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid;
border-color: #ddd #000 #000 #ddd;
background-color: #1a2a3f;
background-image: url(unselected.jpg);
background-repeat: no-repeat;
background-position: 0% 50%;
}
#navlist a:link, #navlist a:visited {
color: white;
text-decoration: none;
}
#navlist a:hover {
background-color: #9F6F9F;
background-image: url(selected.jpg);
background-repeat: no-repeat;
background-position: 0% 50%;
color: red;
}
#navlist a:active {color: blue;}

I include the .css file that cotains it in every html file in which the menu should remain.

Thank you very much in advance!

3:19 am on Aug 4, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


There's actually no way to style the current link using ONLY css. It requires the combined use of css with some other technology to do this. However, it is very doable.

Options include (a)adding a "current" id or class to the menu source code on each page, (b) using a server-side scripting language to add that "current" id or class on the fly, (c)using javascript to dynamically detect the current page and change the styling of the appropriate link, or (d)adding a unique id to the body element on each page, and using the css cascade to target only the matching link.

This being the CSS forum, the first and last options are the most appropriate to discuss (as they involve the most CSS). The first is very laborious, however, and impossible to use if you employ a templating system or some sort of include file to bring the nav menu onto every page from a central location. Option D, therefor, is the best one to cover here.

The idea is this...in your nav menu, there is a link that corresponds to each page on your site. If you could set a unique ID on the body element of each page, you could then tell the browser, via CSS, that anytime it sees a given body ID, it should style the matching link in a certain way.

An example. Say you have the following menu...

<ul>
<li><a href="#" id="one">LINK ONE</a></li>
<li><a href="#" id="two">LINK TWO</a></li>
<li><a href="#" id="three">LINK THREE</a></li>
</ul>

The bolded IDs are unique to each link. Next, I want to style the LINK ONE text with a blue background if I'm on the first page, LINK TWO with a blue backgroundon the second page, etc. My body tags on each of those pages will look like this...

<body id="page_one">
<body id="page_two">
<body id="page_two">

Now, in the CSS I'll tell the browser, any time you see that the body ID is "page_one", style the anchor with ID "one" with a blue background...

body#page_one a#one{
background:blue;
}

I'll then repeat the same code for each page in the menu...

body#page_one a#one, body#page_two a#two, body#page_three a#three{
background:blue;
}

That done, the CSS will do the rest of the work for you. Whenever a visitor lands on a page, the code will style the appropriate link with the desired styles.

cEM

[edited by: createErrorMsg at 10:22 am (utc) on Aug. 4, 2005]

5:25 am on Aug 4, 2005 (gmt 0)

New User

10+ Year Member

joined:Aug 3, 2005
posts:2
votes: 0


Thank you very much, CEM! It worked! I finally understood the matter :)

Thanks again!