How to create a good navigation bar with CSS?
Asked by
Link (
327
)
October 15th, 2009
I’m trying to style a tabbed navigation bar with CSS for the top of my website. I want the tab for the page the user is on to look different from the other tabs, as a sort of “you are here” marker, but for whatever reason I can’t make this happen with the a:active state (I assume that’s what the a:active is for). I know the order (link, visited, hover, active), and all the other states work, except the a:active. Any ideas?
Observing members:
0
Composing members:
0
12 Answers
Check out California’s WebTools site, and see if the navigation there does what you want. All the code is freely downloadable, and you can customize it to suit your needs. The part that highlights the “you are here” tab is done with a tiny piece of JavaScript. We do all of the State’s web sites with this template.
a:active is not the state that occurs when you are on the page of that link.
The peusedo classes in CSS don’t ever take account of what page you are on, however in the case of :visited do they take account of the pages you’ve been on.
Think of :hover, :visited, and :active as “button states.”
:hover – Your mouse is over the button.
:visited – The link has been visited, but your mouse is not over the button.
:active – The mouse button is down (i.e. you are in the middle of clicking on the button).
Let me know if this helps.
@Breefield: Thanks for clearing things up for me. But is there a way to create a “you are here” indicator for the navigation tab, or will I have to know JavaScript like ru2bz46 (funny name lol) suggested?
Like @Breefield says you don’t have CSS figure out what page is being displayed you have your html do it (or php,asp,insert random server side language), you don’t really need javascript either. Let me show you a very simple example:
html
<ul>
. . <li class=“button”>Link 1</li>
. . <li class=“button active”>Link 2</li>
</ul>
css
.button {background-color: #FFF;}
.active {background-color: #CCC;}
The listitem with the class active will have a grey-ish background while other listitems will be white. If you want a more advanced example we’re going to need to know what language you’re using.
Yeah, precisely what @markyy did. Just create an “active” class and change it on every page-file you have.
If you’re using PHP or something then you could have it do this for you, but that’s probably out of scope atm.
365 Days of Astronomy has a good example of this, my friend made this site for work, and like said above, the page you are on, the the tab for current page has an special class to change the style.
I use frameworks that make it easy to know which page you are on and make it easy to reuse html components, so I use that to highlight the current tab. Suppose this is my navigation component I use on every page:
<ul>
<li class=“home”>Home</li>
<li class=“foo”>Foo</li>
<li class=“bar”>Bar</li>
<li class=“about”>About</li>
</ul>
And my outer template is something like this:
<body>
<div id=”{page_name}”>
... {include_navigation_here}...
So it would render something like this:
<body>
<div id=“home”>
<ul>
<li class=“home”>Home</li>
<li class=“foo”>Foo</li>
...
So now it’s easy to write CSS that will highlight the current tab:
#home .home, #foo .foo, #bar .bar, #about .about {
background-color: red;
}
(it also lets you do other page-specific CSS styling without a separate stylesheet for that page)
@phoenyx that’s a great (if not better) way to achieve this. Thanks for sharing that!
Yeah this helped so much. Sorry for the very late response. Thanks again people.
Response moderated
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
