css and active menu

hello,

I wasn't sure how to get things going, and it ended up in a disaster (like myself), but to the point, I put an exemple beneath:

text1
text2
text3
text4

As you see, when someone hits the second link on the menu, it gets another color, when he's viewing that page... That's how I would like it to become, but i can't figure it out!

Some help is really appreciated

Greetzz

javascript...like this...

// Names of the sections...
var names = new Array;
names[0]='Content';
names[1]='Blog';
names[2]='Admin';

function activeTab(now){
for (i=0;i<names.length;i++){
//change styles of things...you can use lots of css in here to change the properties of things...
document.getElementById(names[i]).style.background='#B8B8B8';
}
//activeTab here...
document.getElementById(now).style.background='#ececec';
}

be sure to call things up on the links...

<div id="Content" class="navoff"><a href="yourlink" onclick="activeTab('Content');" onmouseout="this.blur();">Content</a></div>

<div id="Blog" class="Blog"><a href="yourlink" onclick="activeTab('Blog');" onmouseout="this.blur();">Blog</a></div>

<div id="Admin" class="navoff"><a href="yourlink" onclick="activeTab('Admin');" onmouseout="this.blur();">Admin</a></div>

try it out...you'll see how it works...

good luck!...v

you can do it with adding a class current,

I like to use a common navbar in all pages. I give each link its own id, eg.

<a id="page3" ...
<a id="page4" ...

Then, in each page, embed a style declaration like;

#page3 {color: green;}

This will recolor the link to the page you're on. My favorite is to make the link disappear. For example, if you're on the "aboutus" page, the link to "aboutus" does not appear.

#aboutus { display: none; }

cheers,

gary

Thank you all for your early reply!

The javascript did work, but there's one thing, I just want to change the color of the link, and if I change style.background into style.color, it doesn't change... I think this is weird, or else I'm making a big mistake?

This is the code:

<script name="javascript">
// Names of the sections...
var names = new Array;
names[0]='Whatsup';
names[1]='Shoutout';
names[2]='Pictures';

function activeTab(now){
for (i=0;i<names.length;i++){
//change styles of things...you can use lots of css in here to change the properties of things...
document.getElementById(names[i]).style.color='white';
}
//activeTab here...
document.getElementById(now).style.color='#894A20';
}
</script>

HTML-code:

<div id="Whatsup"><a href="#" onclick="activeTab('Whatsup');" onmouseout="this.blur();">What's up</a></div>
<div id="Shoutout"><a href="#" onclick="activeTab('Shoutout');" onmouseout="this.blur();">Shout out</a></div>
<div id="Pictures"><a href="#" onclick="activeTab('Pictures');" onmouseout="this.blur();">Pictures</a></div>

Thank you!

Greetings

Pieter

I guess I'm just not romantic. I don't understand the love affair with using javascript to "write" simple html and css.

In the links menu:
Then each page has this;
What could be simpler? The link associated with a given page gets a new color. If you're using some type of include with a menu file, this is ideal. If you're coding the menu into each page, do as Akh suggested. Use simple text in place of an <a> element (why confuse the visitor with a self referrent link?) with a class designator;
In one method, the menu is common to all pages and the style is individualized. In the other the style is common and the menu is varied.

The simpler you keep it, the easier to maintain.

cheers,

gary

I tried those, but they did not work actually, because I only use one index page. I work with include (php). The visitor should just know where he's is at that moment, as the text of the link for that page is in another color, but you can't do this by putting it on every page itself... I just include the other pages, so they are only text-based, and there is just only one menu of course...



<?php
switch($show)
{
case "news":
include("navnews.php");
break;
......

<a href="index.php?show=news"...

Maybe I misunderstood, but yeah, I'm not perfect..
I thought there was a solution for this, by using css and/or javascript... Hopefully you understand what I'm trying to explain...

Greets

Pieter

Study my examples. Probably the first example is the better for you.

That's exactly what I do. Give each anchor tag in the menu file an ID. In the head of each target page, insert the style declaration.

If you can't make that work, you may have some things to rethink.

cheers,

gary