Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I've created a menu from a tutorial I found online and I'm looking to take it one step further. I'd like to have each link completely change to the background color specified when it's clicked on. I tried using a:active but that didn't seem to work. Here's what I have so far, maybe I need to use some J-Query? Here's the fiddle and code

<div style="width: 1000px; margin: 0 auto; text-align:center; ">
<ul id="menu">
<li><a class="anchor" href="#welcomeanchor">Home</a></li>
<li><a class="anchor" href="#aboutusanchor">About Us </a></li>
<li><a class="anchor" href="#classesanchor">Classes </a> </li>
<li><a class="anchor" href="#scheduleanchor">Schedule</a></li>
<li><a class="anchor" href="#newsanchor">News</a></li>
<li><a class="anchor" href="#programsanchor">Programs</a></li>
<li><a class="anchor" href="#contactanchor">Contact</a></li>
</ul></div>

CSS

 #menu {
    width: 940px; 
    margin: 0 auto;}
    ul li {
    background:#000;
    list-style: none;
    height: 50px;
    float:left;
    padding:0 0;
    }
    ul li a {
    font-family: font3;
    width: 134px;
    height: 50px;
    line-height: 53px;
    border-bottom: 6px solid #636393;
    color: #fff;
    font-size:13px;
    text-transform: uppercase;
    text-align:center;
    text-decoration: none;
    display: block;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -o-transition: .2s all linear;
    transition: .2s all linear;
    }
    li:nth-child(1) a {
    border-color: #fff;
    }
    li:nth-child(2) a {
    border-color: #FF6;
    }
    li:nth-child(3) a {
    border-color: #F60;
    }
    li:nth-child(4) a {
    border-color: #00F;
    }
    li:nth-child(5) a {
    border-color: #0C6;
    }
    li:nth-child(6) a {
    border-color: #63C;
    }
    li:nth-child(7) a {
    border-color: #F00;
    }
    li:nth-child(1) a:hover {
    color: #000;
    border-bottom: 55px solid #fff;
    height: 1px;
    }
    li:nth-child(2) a:hover {
    color: #000;
    border-bottom: 55px solid #ff6;
    height: 1px; }
    li:nth-child(3) a:hover {
    border-bottom: 55px solid #f60;
    height: 1px; }
    li:nth-child(4) a:hover {
    border-bottom: 55px solid #00f;
    height: 1px; }
    li:nth-child(5) a:hover {
    border-bottom: 55px solid #0c6;
    height: 1px; }
    li:nth-child(6) a:hover {
    border-bottom: 55px solid #63c;
    height: 1px; }
    li:nth-child(7) a:hover {
    border-bottom: 55px solid #f00;
    height: 1px; }
share|improve this question
use jquery -> when element is clicked add "active" class and then using css style the active class. FYI - this is different than "a:active" "a.active" is the selector to use for an active class. – ProfileTwist Jul 29 at 17:39

4 Answers

up vote 1 down vote accepted

Kind of had some fun with this.

The jQuery Solution

$('.anchor').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active');
});

You just need to add the active class to your css. http://jsfiddle.net/bplumb/EDZ8F/7/

The Pure CSS Solution

Is a little more challenging and limited. I created an example of what you could do using the :target psudeo-class.

http://jsfiddle.net/bplumb/EDZ8F/6/

The HTML

<div style="width: 1000px; margin: 0 auto; text-align:center; ">
    <ul id="menu">
        <li id="welcomeanchor"><a class="anchor" href="#welcomeanchor">Home</a>
            <div><p>Home Content</p></div>     
        </li>
        <li id="aboutusanchor"><a class="anchor" href="#aboutusanchor">About Us </a>
             <div><p>About Us Content</p></div>
        </li>
        <li id="classesanchor"><a class="anchor" href="#classesanchor">Classes </a> 
            <div><p>Classes Content</p></div>
        </li>
        <li id="scheduleanchor"><a class="anchor" href="#scheduleanchor">Schedule</a>
            <div><p>Schedule Content</p></div>
        </li>
        <li id="newsanchor"><a class="anchor" href="#newsanchor">News</a>
            <div><p>News Content</p></div>
        </li>
        <li id="programsanchor"><a class="anchor" href="#programsanchor">Programs</a>
            <div><p>Programs Content</p></div>
        </li>
        <li id="contactanchor"><a class="anchor" href="#contactanchor">Contact</a>
            <div><p>Contact Content</p></div>
        </li>
    </ul>
</div>

Relevant Changed CSS

#menu li:not(:target) div{
    display: none;
}
#menu li div{
    position: absolute;
    left: 75px;
}
li:nth-child(1) a:hover, li:nth-child(1):target a {
    color: #000;
    border-bottom: 55px solid #fff;
    height: 1px;
}
li:nth-child(2) a:hover, li:nth-child(2):target a{
    color: #000;
    border-bottom: 55px solid #ff6;
    height: 1px; 
}
li:nth-child(3) a:hover, li:nth-child(3):target a{
    border-bottom: 55px solid #f60;
    height: 1px; 
}
li:nth-child(4) a:hover, li:nth-child(4):target a{
    border-bottom: 55px solid #00f;
    height: 1px; 
}
li:nth-child(5) a:hover, li:nth-child(5):target a{
    border-bottom: 55px solid #0c6;
    height: 1px; 
}
li:nth-child(6) a:hover, li:nth-child(6):target a{
    border-bottom: 55px solid #63c;
    height: 1px; 
}
li:nth-child(7) a:hover, li:nth-child(7):target a{
    border-bottom: 55px solid #f00;
    height: 1px; 
}
share|improve this answer
I really like the way you did this! I'm going to use this method :) – Ovidio Borrero Jul 29 at 18:56
where should the javascript be placed, does it matter if it's in the head or body? – Ovidio Borrero Jul 29 at 20:09
I like to put all of my javascript right before the closing </body> tag. You can place your javascript anywhere you like though as long as you wrap it in a $('document').ready() learn.jquery.com/using-jquery-core/document-ready – Blake Plumb Jul 29 at 20:17
So you decided to go with the javascript method instead of the pure CSS solution? – Blake Plumb Jul 29 at 20:24
I used yours. Is what's attached to your fiddle javascript or jquery? I don't know how to diffeientate between the two :D – Ovidio Borrero Jul 29 at 20:26
show 2 more comments
up vote 2 down vote

Try this

In Js

 $(document).ready(function(){
    $(".anchor").click(function(){
       $(".anchor").each(function(){
          $(this).parent("li").css("background","#000")
       })
       var color1 = $(this).css("border-color");
       $(this).parent("li").css("background",color1);
    })
 })

FIDDLE

share|improve this answer
Great solution, I would add semi-colon's to the end of each function to be semantically correct. – MrB Jul 29 at 17:56
This is perfect. The only thing that happens is for the White and Yellow links, the text color remains white and is hard to see, anyway to edit this to have those two list items appear black in color? – Ovidio Borrero Jul 29 at 18:15
@Ovidio Borrero : I have update my FIDDLE so please check it out..! – YashPatel Jul 29 at 18:30
up vote 1 down vote

You can specify active to each element

DEMO http://jsfiddle.net/kevinPHPkevin/EDZ8F/2/

li:nth-child(1) a:active {
color: #fff;
}
li:nth-child(2) a:active {
color: #ff6;
}
li:nth-child(3) a:active {
    color:#f60;
}
li:nth-child(4) a:active {
    color:#00f;
}
share|improve this answer
up vote 0 down vote 
var a = $('a.anchor');
$(a).click(function () {

    $(a).removeClass('active');
    $(this).addClass('active');

});

http://jsfiddle.net/EDZ8F/4/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.