SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Change color for selected menu

    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!!!

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,444
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    I think this post answers your question.
    Don't serve your porridge and then go out for a walk.

  3. #3
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I found it is needed to modify menu source code for each page
    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).

    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?

  5. #5
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Great!! I will be testing.

    Thanks again!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •