how to change menu background color when selected?

Question

I started learning CSS these days, currently i was given with one CSS task, i've tried but iam not getting it..

here is my requirement:

The site is http://mywebsite.com/ .

You will notice the the menu bar has a hover the color is #1B3E70 . That's the color I want to the selected menu bar item to display when the on the corresponding area/page.

I tried as below but not getting:

 a:visited{
    background: #1B3E70;
}

please suggest me..

possible duplicate of [Highlight current page in jquery](http://stackoverflow.com/questions/2955851/highlight-current-page-in-jquery) — Paulie_D, Jan 20 '14 at 03:54

score 7 · Accepted Answer · answered Jan 20 '14 at 09:34

7

With Reference to your link (classes and id) :

HTML

<li class="menu-item">
    <a href="#">About</a>
    <a href="#">Home</a>
</li>

CSS

 .menu-item{
        list-style:none;
    } 
    .menu-item a{
        padding:20px;
        padding-bottom:10px;
        border:1px solid #1B3E70;
        color:#1B3E70;
        text-decoration:none;
    }.menu-item a:hover{
            background-color:#1B3E70;
        color:white;
    }
    .menu-item .active{
         background-color:#1B3E70;
         color:white;

    }

Jquery

    $('.menu-item a').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    });

Live Example http://jsfiddle.net/7VBy9/

answered Jan 20 '14 at 09:34

Suraj Rawat

3,685
22
33

hey, i tried your code, BUT still not getting required output.. please suggest me what went wrong..? – user3128668 Jan 21 '14 at 00:43
currently, whatever menu clicked, its getting selected with desired color, but color still remaining on that tab. – user3128668 Jan 21 '14 at 01:14
The reason is You have to remove the style/class from the other tab while one is selected which was achieved via siblings ! – Suraj Rawat Jan 21 '14 at 06:53
Can you please tell me which class/style should remove? – user3128668 Jan 21 '14 at 10:05
The .active class my friend :) – Suraj Rawat Jan 23 '14 at 05:39

score 0 · Answer 2 · answered Jan 20 '14 at 03:28

0

The background-color on a:visited only seems to work in FF, Chrome and Safari. if the normal a has a background-color, either explicitly defined or through inherit (the direct parent must actually have a background-color for this to be true).

Obviously it is not ideal to have to define a background-color for a all the time, as the site may have a background image.

answered Jan 20 '14 at 03:28

Milind Anantwar

81,290
25
94
125

so, what changes I need to do? – user3128668 Jan 20 '14 at 03:29
see this http://stackoverflow.com/questions/14202856/background-image-for-visited-links – Milind Anantwar Jan 20 '14 at 03:41

score 0 · Answer 3 · answered Jan 20 '14 at 03:37

0

If you means highlight the current menu text when it's clicked, then you can try to use this code:

$(function() {
     $('#nav li').click(function() {
         $(this).find('a').addClass('active');
          $(this).siblings('li').find('a').removeClass('active');
     })
});

and add .active in your css:

.active {
    background: #1B3E70;
}

answered Jan 20 '14 at 03:37

Felix

37,892
8
43
55

Ideally, but I am not the OP, it would also highlight on scroll down to those content `div`s. This should do it: http://stackoverflow.com/questions/8393442/highlight-active-link-when-using-scrollto-based-on-current-view – jammykam Jan 20 '14 at 03:43
@Felix : Do I really need to use some jquery here? is that not possible to do with some CSS settings? – user3128668 Jan 20 '14 at 03:45
1

@user3128668 There is no way you can achieve the same effect using pure CSS, the `:visited` pseudo class is not applicable in your case. – Felix Jan 20 '14 at 03:52
@jammykam Absolutely, since OP using one-page navigation. – Felix Jan 20 '14 at 03:53
@Felix i tried your code, but not required output.. i even tried above code ie., user3011961 , even that also not working.. currently iam using user3011961 code, i think his code is also correct as he showned output in his fiddle, can you please suggest me still what went wrong with his code? – user3128668 Jan 21 '14 at 00:48
user3218668's code seems working for me, BUT prob is: currently, whatever menu clicked, its getting selected with desired color, but color still remaining on that tab. So, could you please tell me what need to change code in his function? – user3128668 Jan 21 '14 at 01:15

mahendra rajeshirke · Answer 4 · 2014-01-20T05:52:04.390

0

Try,

jQuery(function(){
 jQuery('#nav li a').click(function() {
 jQuery('#nav li a').removeClass('active');
 jQuery(this).addClass('active');
 });
});

Also add following css to your file

.links a.active {
    color: #FFFFFF;
    background-color: #1B3E70;
}

edited Jan 20 '14 at 05:52

answered Jan 20 '14 at 05:46

mahendra rajeshirke

122
8

score -1 · Answer 5 · answered Jan 20 '14 at 03:29

-1

Try using this for changing the color.

a:visited {color: #1B3E70;}

answered Jan 20 '14 at 03:29

Vinayak Pingale

1,315
8
19

how to change menu background color when selected?

5 Answers5

Linked