General Question

Link's avatar

How to create a good navigation bar with CSS?

Asked by Link (327points) October 15th, 2009
12 responses
“Great Question” (0points)

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

Answers

ru2bz46's avatar

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.

ru2bz46 (6743points)“Great Answer” (0points)
ragingloli's avatar

removed by satan

ragingloli (51962points)“Great Answer” (0points)
Breefield's avatar

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 (2733points)“Great Answer” (0points)
Link's avatar

@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?

Link (327points)“Great Answer” (0points)
markyy's avatar

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.

markyy (6257points)“Great Answer” (1points)
Breefield's avatar

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.

Breefield (2733points)“Great Answer” (1points)
erichw1504's avatar

@markyy & @Breefield Yup, that’s what I do all the time. Works great.

erichw1504 (26448points)“Great Answer” (0points)
wenn's avatar

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.

wenn (2673points)“Great Answer” (1points)
phoenyx's avatar

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 (7401points)“Great Answer” (0points)
markyy's avatar

@phoenyx that’s a great (if not better) way to achieve this. Thanks for sharing that!

markyy (6257points)“Great Answer” (0points)
Link's avatar

Yeah this helped so much. Sorry for the very late response. Thanks again people.

Link (327points)“Great Answer” (0points)
Response moderated

Answer this question

Login

or

Join

to answer.

Older »
Why will Windows Installer not work?
« Newer
Should little kids sit with their legs splayed back ...

Mobile | Desktop


Send Feedback   

`