How is it possible to make a menu like this website? When you click on "Forum" a green images shows up. The same happens when you click on "Members". How do I do that, when I want another image to show when I have clicked on the menu link?

You want the :active pseudo-class

 

<style>
.menu {
 background-image: url("image/one.png");
}
.menu:active {
 background-image: url("image/two.png");
}
</style>

<a class="menu">Menu Item</a>

 

Something like that, the two.png will be used when the item is active. However to avoid a brief flash when the images change its wise to use the same image, for example : then use background-position: in the active to swap to the active one.

 

Edit: :active will show while you're clicking on the element, :visited will show forever after theyve visited a page once.

Edited July 23, 201016 yr by James Riley

That wasn't exactly what I was looking for. I want the image to show while you are at the link you clicked, and then disappear when you click on another.

Just like on this site. You are at the forum, and when you click on Members, the green image moves there.

Forums and Members are two different pages, honey, so when you click on one of them, depending which browser you use, browser might keep you on the current page until it loads a new one and then shift you to the new page which then has active green background in it's link. This usually happens so fast that you might think you're on the same page, but you're not. I'm not very good at explaining things, am I?

 

 

lol.... I don't think that I am on the same page, and I don't think that the webdesigner have added the menu manually on 6 different pages (or more). There is something called header and footer. If you want to use the same header (which includes a menu) and footer on every page on your website you use php includes instead of adding the header manually on every page on your website.

 

Everything is possible in webdesigning, so I know there must be a way to do this.

lol.... I don't think that I am on the same page, and I don't think that the webdesigner have added the menu manually on 6 different pages (or more). There is something called header and footer. If you want to use the same header (which includes a menu) and footer on every page on your website you use php includes instead of adding the header manually on every page on your website.

 

Everything is possible in webdesigning, so I know there must be a way to do this.

 

Hi,

I think i understand what you want:

 

It is like a tab system - when you mouse over or click on the link it will change the background of the link.

 

several ways to do this really. use some css and javascript to switch the background image. I even used some php and aspx coding to rewrite the menu on the fly even by using an include.

 

is it what you want?

 

Let me know,

Hi,

I think i understand what you want:

 

It is like a tab system - when you mouse over or click on the link it will change the background of the link.

 

several ways to do this really. use some css and javascript to switch the background image. I even used some php and aspx coding to rewrite the menu on the fly even by using an include.

 

is it what you want?

 

Let me know,

 

 

I think I found a tutorial here: http://devthought.com/blog/projects-news/2007/01/cssjavascript-true-power-fancy-menu/

That website uses a menu like that aswell.

well, sugar, that just means that you failed to formulate exact question, because from the perspective of the browser HTML file is the same, whether it's static or generated by PHP. On the other hand if you have no skills in PHP it might be difficult to implement that

 

To create it with plain html is no problem, but only noobs do that and I'm not a noob. But, whatever, I figured it out...