CODEWITHSUNDEEP
htmlcss
JohnRambo
JohnRambo

Reputation: 518

CSS navigation background

I am trying to make a custom CSS navigation for my website but I have some problems you can find the code sniped bellow. I am making a CSS vertical navigation here is the code:

<style type="text/css">

/* GT stylesheet */
#cssmenu > ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}

/* The container */
#cssmenu > ul {
display: block;
position: relative;
width: 150px;
}

/* The list elements which contain the links */
#cssmenu > ul li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 250px;   
}

    /* General link styling */
    #cssmenu > ul li a {
        /* Layout */
        display: block;
        position: relative;
        margin: 0;
        border-top: 1px dotted #3a3a3a;
        border-bottom: 1px dotted #1b1b1b;
        padding: 11px 20px;
        width: 210px;

        /* Typography */
        font-family: Helvetica, Arial, sans-serif;
        color: #d8d8d8;
        text-decoration: none;
        text-transform: uppercase;
        text-shadow: 0 1px 1px #000;
        font-size: 13px;
        font-weight: 300;


        /* Background & effects */
        background: #282828;
    }

    /* Rounded corners for the first link of the menu/submenus */
    #cssmenu > ul li:first-child>a {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-top: 0;
    }

    /* Rounded corners for the last link of the menu/submenus */
    #cssmenu > ul li:last-child>a {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom: 0;
    }


    /* The hover state of the menu/submenu links */
    #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
        color: #000;
        text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
        background: #A9CA6F;
        background: -webkit-linear-gradient(bottom, #A9CA6F, #B4D876);
        background: -ms-linear-gradient(bottom, #A9CA6F, #B4D876); 
        background: -moz-linear-gradient(bottom, #A9CA6F, #B4D876);
        background: -o-linear-gradient(bottom, #A9CA6F, #B4D876);
        border-color: transparent;
    }

    /* The arrow indicating a submenu */
    #cssmenu > ul .has-sub>a::after {
        content: '';
        position: absolute;
        top: 16px;
        right: 10px;
        width: 0px;
        height: 0px;

        /* Creating the arrow using borders */
        border: 4px solid transparent;
        border-left: 4px solid #d8d8d8; 
    }

    /* The same arrow, but with a darker color, to create the shadow effect */
    #cssmenu > ul .has-sub>a::before {
        content: '';
        position: absolute;
        top: 17px;
        right: 10px;
        width: 0px;
        height: 0px;

        /* Creating the arrow using borders */
        border: 4px solid transparent;
        border-left: 4px solid #000;
    }

    /* Changing the color of the arrow on hover */
    #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
        border-left: 4px solid #fff;
    }

    #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
        border-left: 4px solid rgba(0, 0, 0, .3);
    }
</style>

The problem is that I cannot make the link I clicked on to change its background to: #A9CA6F. I want when I make my <li> with id/class active to stay with this color: #A9CA6F Any help?

Thanks in advance!

DEMO this is the link for the fiddle!

Upvotes: 0

Views: 637

Answers (4)

The Mechanic
The Mechanic

Reputation: 2329

Try this and check this fiddle http://jsfiddle.net/sarfarazdesigner/WT9Uw/3/

#cssmenu > ul li.active > a, #cssmenu > ul li.active > a {
   background-color:#A9CA6F;            
   color: #000;
}

Upvotes: 1

Doug
Doug

Reputation: 821

Add this...

#cssmenu li.active a {background-color:#A9CA6F;}

I think all you need to do is add the background-color to the a and target it quite specifically. Here's the fiddle - I've added a line at the bottom of your CSS. If you don't target it specifically enough it won't overrule the default style.

EDIT

To elaborate slightly, previously in your CSS you have stated:

#cssmenu > ul li a {...}

So in order to target your active class you must be more specific than this, otherwise the above rule will override all others - hence:

#cssmenu > ul li.active a {...}

and not...

li.active a  {...}

So, for example, in a no-holds-barred fight between CSS rules...

  1. #menu a would beat a.active
  2. a.active would beat just a
  3. #wrapper #menu a would beat #menu a

:-) HTH

Upvotes: 1

Martin Turjak
Martin Turjak

Reputation: 21214

You could try it via some javascript if it is going to navigate also inside the same page. Here is a jQuery solution:

$("#cssmenu li").click(function(){
    $("#cssmenu li").removeClass('active');
    $(this).addClass('active');
});

jsfiddle

It moves the .active class to whatever li has been clicked. And in CSS you can add a selector that looks something like that (to your hover selectors):

#cssmenu > ul li.active a

Upvotes: 1

Hafid Denguir
Hafid Denguir

Reputation: 952

it's simple add this code:

#cssmenu > ul li.active a{
    background-color: #A9CA6F;
}

Demo

Upvotes: 1

Related Questions