Reputation: 10066

Make link a different color when active

All, I've currently got the following CSS for my navigation menu:

#primary-menu, .default-menu, #mobile-menu-dropdown li, .site-navigation a {
  font-size: 32px;
}

Then I have the following HTML to display the menu:

<nav id="primary-menu-container" role="navigation" class="site-navigation main-navigation clearfix">
<div class="menu-main-menu-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-79" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-79"><a href="http://website.com/new_site/">Home</a></li>
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a href="http://website.com/new_site/tagged?tag=news">News</a></li>
<li id="menu-item-69" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-69"><a href="http://website.com/new_site/tagged">Blog</a></li>
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71"><a href="http://website.com/new_site/music">Music</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73"><a href="http://website.com/new_site/shows">Shows</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-75"><a href="http://website.com/new_site/photos">Photos</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76"><a href="http://website.com/new_site/videos">Videos</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-113"><a href="http://website.com/new_site/faq">FAQ</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://website.com/new_site/contact">Contact</a></li>
</ul></div>             
</nav>

When someone clicks on one of these links I'd like to make the link active and color #FF0000 for example. I tried the following CSS but it doesn't keep the color when the new page loads:

#primary-menu, .default-menu, #mobile-menu-dropdown li, .site-navigation a:active {
  color: #FF0000;
}

Anyone have any ideas on how to make this work?

EDIT: I added some jQuery as Explosion Pills recommended. This jQuery looks like this:

jQuery(".menu a").each(function () {
    if(jQuery(this).attr('href') === jQuery(location).attr('href')){
        if (jQuery(this).attr('title') === jQuery(this).text()) {
            alert("It is in here and the title is: " + jQuery(this).attr('title'));
            jQuery(this).css('color', '#FF0000');
        }
    }
});

It is getting into my alert successfully but it isn't applying the color that I have specified to the link (it doesn't do it for any link)

Link to the page: http://tinyurl.com/a7tpvwy

Upvotes: 0

Answers (5)

javacoder101

Reputation: 343

In order to do what your are trying to do you must first understand a:hover Must come after a:link and a:visited in the CSS definition in order to be effective. If they are not in this order then they will not work.

Second is you must understand that if you where thinking (a:active) meant the color of the current link the end user was on, this is incorrect. (a:active) changes the color when you click on the link. You can test this by holding down the mouse button on the link that you made a different color with the (a:active).

Finally, if you are trying to do this using just CSS you have to add a specific class on the current link that the end user is on. Below I left you an example hope this helps :)

Your Navigation Bar As Follows
-Home
-News
-Blog
-ect...

We are on the "Blog" Page For This Example:

 /*YOUR CSS SHOULD LOOK LIKE THIS*/
    /* Note: You can make these any colors you want *\

    /* unvisited link grey */
    #primary-menu-container a:link {
    	color: #777;
    }
    /* visited link grey */
    #primary-menu-container a:visited {
    	color: #777;
    }
    /* mouse over link blue */
    #primary-menu-container a:hover {
    	color: #0CF;
    }
    /* selected link blue */
    #primary-menu-container a:active {
    	color: #0CF;
    }
    /* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
    /* Note: You can make this any color you want */
    
    .activePage a {
    	color: #0CF !important
    }

<nav id="primary-menu-container" role="navigation">
<div class="menu-main-menu-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-79" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-79"><a href="http://website.com/new_site/">Home</a></li>
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a href="http://website.com/new_site/tagged?tag=news">News</a></li>
<li id="menu-item-69" class="activePage"><a href="http://website.com/new_site/tagged">Blog</a></li><!-- Notice the clase="activePage" -->
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71"><a href="http://website.com/new_site/music">Music</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73"><a href="http://website.com/new_site/shows">Shows</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-75"><a href="http://website.com/new_site/photos">Photos</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76"><a href="http://website.com/new_site/videos">Videos</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-113"><a href="http://website.com/new_site/faq">FAQ</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://website.com/new_site/contact">Contact</a></li>
</ul></div>             
</nav>

Notice I did not put the .activePage tag in the other links? What this does is allow your original colors that you choose in your css for your navigation bar to still take place while the page that is active stays solid with a different color.

The reason this worked is because I added !important at the end of the color for that separate class.

.activePage {
      color: #0CF !important
    }

So to apply this same technique to your other pages it would simply look like this:

"Home Page"

 /*YOUR CSS SHOULD LOOK LIKE THIS*/
    /* Note: You can make these any colors you want *\

    /* unvisited link grey */
    #primary-menu-container a:link {
    	color: #777;
    }
    /* visited link grey */
    #primary-menu-container a:visited {
    	color: #777;
    }
    /* mouse over link blue */
    #primary-menu-container a:hover {
    	color: #0CF;
    }
    /* selected link blue */
    #primary-menu-container a:active {
    	color: #0CF;
    }
    /* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
    /* Note: You can make this any color you want */
    
    .activePage a {
    	color: #0CF !important
    }

 <nav id="primary-menu-container" role="navigation">
<div class="menu-main-menu-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-79" class="activePage"><a href="http://website.com/new_site/">Home</a></li><!-- Notice the clase="activePage" -->
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a href="http://website.com/new_site/tagged?tag=news">News</a></li>
<li id="menu-item-69" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-69"><a href="http://website.com/new_site/tagged">Blog</a></li>
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71"><a href="http://website.com/new_site/music">Music</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73"><a href="http://website.com/new_site/shows">Shows</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-75"><a href="http://website.com/new_site/photos">Photos</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76"><a href="http://website.com/new_site/videos">Videos</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-113"><a href="http://website.com/new_site/faq">FAQ</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://website.com/new_site/contact">Contact</a></li>
</ul></div>             
</nav>

I hope I gave you a solid answer to your question.

Upvotes: 0

Explosion Pills

Reputation: 191729

I assume that you want the next page to load, so this is not possible purely with CSS because CSS has no way of knowing what page you are on. You can either employ a JavaScript solution that checks whether the current location is equal to the location of any link and highlights it green, e.g.

Array.prototype.forEach.call(document.querySelectorAll('a'), function (elem) {
    if (elem.getAttribute('href') === window.location.pathname) {
        elem.style.color = '#FF0000';
    }
});

The simpler alternative is to handle it on the server side. When you are printing out the header links, check the current location and set the link's style if there's a match.

EDIT: jQuery version:

$("a").each(function () {
    if ($(this).attr('href') === window.location.pathname) {
        $(this).css('color', '#FF0000');
    }
});

Upvotes: 3

Krayg

Reputation: 645

One simple way to style the link:

ul.menu li a:active {color: #FF0000;}

Edit: sorry, I missed the part where you said you want the colour to persist when the new page loads. As has been said, you need some client/server side code for that.

Upvotes: 1