How would I make it so that the item that is clicked in the menu, stays highlighted blue. So basically the active menu item.

Fiddle

I've tried using css active, but im thinking I need javascript or something.

 #cssmenu > ul li > a:active, #cssmenu > ul li:active > a {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    background: #54cdf1;
    background: -webkit-linear-gradient(#72d4f2, #54cdf1);
    background: -moz-linear-gradient(#72d4f2, #54cdf1);
    background: linear-gradient(#72d4f2, #54cdf1);
    border-color: transparent;
}

How would I make it so that the item that is clicked in the menu, stays highlighted blue. So basically the active menu item.

Fiddle

I've tried using css active, but im thinking I need javascript or something.

 #cssmenu > ul li > a:active, #cssmenu > ul li:active > a {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    background: #54cdf1;
    background: -webkit-linear-gradient(#72d4f2, #54cdf1);
    background: -moz-linear-gradient(#72d4f2, #54cdf1);
    background: linear-gradient(#72d4f2, #54cdf1);
    border-color: transparent;
}

• javascript
• jquery
• css

Share Follow asked Oct 3, 2013 at 18:47 user1938745user1938745 19322 gold badges55 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You'll need some JS for that.

$(document).ready(function() {
    $("#cssmenu li").on("click", function() {
        $("#cssmenu li").removeClass("active");
        $(this).addClass("active");
    });
});

Then just style #cssmenu li.active the way you want it in your CSS.