CODEWITHSUNDEEP
jquerycss
user3128668
user3128668

Reputation: 157

how to change menu background color when selected?

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

Upvotes: 3

Views: 38590

Answers (5)

Suraj Rawat
Suraj Rawat

Reputation: 3763

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/

Upvotes: 7

mahendra rajeshirke
mahendra rajeshirke

Reputation: 122

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;
}

Upvotes: 0

Felix
Felix

Reputation: 38112

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;
}

Upvotes: 0

Vinayak Pingale
Vinayak Pingale

Reputation: 1315

Try using this for changing the color.

a:visited {color: #1B3E70;}

Upvotes: -1

Milind Anantwar
Milind Anantwar

Reputation: 82251

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.

Upvotes: 0

Related Questions