Jump to content

Active State in CSS menu


fazlionline

Recommended Posts

I have a simple menu, and it have some links.

I want if any one click on a link, and that page opens, this page (opened page) color should be different. So the user can see that he is now at this page.

How can I do it?

 

I added

 

a:active { text-decoration: none; color: #FFCC66; }

 

 

But this do not work

 

http://www.geocities.com/fazlionline/css/active.html

 

need help

Edited by fazlionline
Link to comment
Share on other sites

The a:active only works in most browsers when you are holding down the mouse button (so that it shows which link is active).

 

You want a permanebt different color on the new page. See

http://www.wickham43.net/highlighthome.php

 

The top example uses CSS and the bottom example PHP. The top CSS method is probably the simplest and uses a "matched pairs" principle. Every page has a different id (either for the body tag or a menu div) and the menu links have the ids and when the menu matches the id of the page, the color or background image changes.

 

The examples use background-images and colors but you can leave out the background-images.

 

It works by changing the a: text color for the link which the matches the page id, not the a:active color.

Link to comment
Share on other sites

  • 2 weeks later...
Guest steammultimedia

Hi there,

 

If you are looking to have an active state then you need to have 2 different class styles to put on your link such as:

Selected and unSelected.

 

Make sure you create a class for each. This is what you need to do for HTML

 

What you are looking at there is more for the program PHP in some sort of content management system.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...