| SitePoint Sponsor |
Good day,
I have a website with a menu with different options. When select an option, a new page is displayed.
When select an option, I'd like to have this option in a different color, showing which option is selected.
I have tried using:
#menu a:hover {
color: green;
}
But what I get is when mouse pointer is on the menu option, it turns green, but it does not remain green after selected.
Thanks a lot!!!
I think this post answers your question.
If you're a bear made of mohair, ponder on the nature of a mo.
Hi,
Thanks a lot for your help.
I have studied the post, maybe I understood it wrongly, but I found it is needed to modify menu source code for each page, in order the right menu section is highlighted in each case.
Is it another way to do this? I mean using any dynamic property like "a:hoover", in order to use one piece of code for menu section for all pages?
Regards.
This is a yes and no situation. If your page is dynamic, yes the easiest way is to have your script add a class="current" to all relevant elements ( such as a navigation list item).I found it is needed to modify menu source code for each page
Alternatively, you can code the menu so that each link is always identified: ( <li class="home">...</li><li class="item1">...</li><li class="item2">...</li><li class="item3">...</li> and so forth) and identify the page <body class="item1"> ( you can put this clas son a page wrap instead, if you have one)
and your css would be THUS:
.home li.home a, .item1 li.item1 a,.item2 li.item2 a, .item3 li.item3 a, #menu a:hover {color: green;}
Either way you have to identify the link and the page somehow in the CSS, otherwise how would the CSS know which page it's on and which link is which?
Brilliant ideas, elegant execution.
Graphic Design, Art Direction, Copywriting and Web Design.
Great!! I will be testing.
Thanks again!!
Posting Permissions
Reply With Quote
Bookmarks