Tabbed Navigation Bar

[NeedFood]

I'm trying to create a tabbed navigation bar using <div><ul><li>. I can change the font color and background-color when the tab menu is hover, active, or visited.

How can I change the background-color of the tab menu you just clicked? Yahoo website tabbed navigation bar is an example <

http://www.yahoo.com/>

My navigation bar doesn't have to be that fancy. I just want to change the font color and background-color when you click on the tab menu. (and the color has to stay until you click on a different tab.)

Please give me advice. Thank you.

 

[chessbot]

Use javascript: forum216

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

 

[Vragabond]

For normal links and hovers it is not a problem. You can do that with css pseudo classes link, :hover). :active should solve the third option but it is not properly implemented in any of the browsers. You will have to use another class to describe the 'selected' option. If you have static pages that will be simple, simply add <a href="..." class="active"> to your selected link and describe the active background and color in your css. For dynamic pages you will have to build a mechanism that will check which option is currently selected.

 

[chessbot]

To be able to save the last clicked box, you will need some modicum of Javascript unless the tab navigates to a new page when you mouse over. In that case, you wouldn't be able to save it anyway.

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

 

[Vragabond]

If he has a static page, let's say three pages: home.html, aboutme.html and contact.html, he can have 3 buttons and apply .active class to the button that the page represents. No JS needed, the effect is what he was looking and it works. In a dynamic page, he would have to determine which page it is (read the file, read the variable that defines the page...) and then apply .active class to that link. No JS neccessary again.

 

[chessbot]

Yes, if they are in multiple pages. Are they?
If the buttons are on the same page or in a frame, then Javascript is necessary.

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

 

[Foamcow]

To expand upon what Vragabond has said. I used the following technique on my own site. My navigation is in an included file (for ease of editing) so this worked well for me...

Look at

http://www.foamcow.com

Each item in the navigation has a class associated with it.

At the top of each page, the class for the navigation item is changed to reflect which page you are on.

This works because of the cascading nature of stylesheets.
[ol]
[li]External styles are applied first.[/li]
[li]Then Internal stylesheets.[/li]
[li]And finally inline styles.[/li]
[/ol]
So you can effectively over-ride any already defined styles.


NOTE: Looking at what I did, perhaps ID's would be more suitable than classes.

http://www.foamcow.com

- Web design and ranting

http://www.toccoagames.com

- Day of Defeat gaming community
"I'm making time

 

[ChrisHunt]

Take a look at these articles:

http://www.alistapart.com/articles/slidingdoors/

and

http://www.alistapart.com/articles/slidingdoors2/

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[NeedFood]

Thank you all for replying to my question. I appreciate it. I'm trying to make my tabbed navigation bar on a User Control (ASP.NET). So, since the navigation is not static, I'll use JavaScript.

 

[Foamcow]

Just bear in mind that if the user has Javascript disabled then the effect will not work.

In what way is the navigation not static? You mean the items in it change depending on what page the user is on?

If so, then why not do as Vragabond suggested and create a ".active" class. Then dynamically assign that class to the corresponding nav element using a conditional.

http://www.foamcow.com

- Web design and ranting

http://www.toccoagames.com

- Day of Defeat gaming community
"I'm making time