Highlight 'Current Page' Link

Highlight ‘Current Page’ Link

In your typical page navigation, you might have a ‘normal’ state and a ‘hover’ state using the :hover pseudo-class. For example, all nav links have a blue background which changes to a red background when the mouse hovers over them. What if you decide that you’d like the ‘current page’ link to have a red background too? After all, this would make it easier for your visitors to see which page they’re on.

There are a couple of ways to achieve this but before we go any further, I’d like to clear up a common css beginner assumption, namely that the ‘active’ pseudo-class styles the current page’s link (it does nothing of the sort).

The a:active pseudo-class only applies when the link is being ‘activated’ i.e. when the mouse is clicked on it. As soon as the mouse button is released, the link is no longer ‘active’. This acts in a similar way to the javascript attribute onmousedown.

OK, let’s get back on track. As I said, there are two common ways to highlight the current page with css.

Example 1:

Firstly, you could assign each relevant link a class of “current”. For example, on your ‘about’ page, you would give the ‘about’ link a class of “current” whilst on your contact page you would give the ‘contact’ link a class of current.

<ul id="navigation">
<li><a href="index.html">Home Page</a></li>
    <li><a class="current" href="about.html">About Me</a></li>
<li><a href="contact.html">Contact Me</a></li>
<li><a href="portfolio.html">My Work</a></li>
</ul>

In your css, you would add the .current selector to the :hover selector declaration, like this:

a {
    background-color:#00f;
}
a:hover,a.current {
    background-color:#f00;
}

Example 2:

Another way to achieve this effect is to assign an id attribute to each page’s body tag and and also give id attributes to each nav link.

<body id="aboutpage">
    <ul id="navigation">
        <li><a id="homelink" href="index.html">Home Page</a></li>
        <li><a id="aboutlink" href="about.html">About Me</a></li>
        <li><a id="contactlink" href="contact.html">Contact Me</a></li>
        <li><a id="portfoliolink" href="portfolio.html">My Work</a></li>
    </ul>
<body>

Doing it this way, you would have a block of css selectors all given the specific style.

1
2
3

#homepage #homelink, #aboutpage #aboutlink, #contactpage #contactlink, #portfoliopage #portfoliolink {
    background-color:#f00;
}

If you’re using PHP includes to include your site’s main navigation, please read ‘Highlighting The Current Page With PHP Includes’ to see how to highlight the current page using php.

Category: CSS // Make ElanMan happy and be the first to comment.Open my Lovebox

RSS

ElanMan