CSS Sprites - making one of the buttons active with the body id

Posted in HTML and CSS -

In a couple of posts last year I covered how to use CSS sprites for navigation and then how to make one of the buttons active on the page. This post is in response to a comment by "Jessica" on the second page which shows how to make one of the buttons active based on the id of the page's <body> tag.

Read the first post for full details

The navigation example below uses a single image to show all buttons in both their active and non-active state. I have covered this already in the first post so be sure to have a quick look at that page before coming back here to see how to make one active based on the body id.

Setting the body id property

This tip requires an id to be set for the page's <body> tag which would need to be done in server-sided code. You may have unique ids for every page or possibly for particular sections or page types.

For example, I've been using SilverStripe recently and each page type has its own class (e.g. HomePage, ContentPage, EventHolder, EventPage etc) and can be coded into the SilverStripe template like this:

<body id="$ClassName">

Making the button active depending on the body id

Here's the same working example used in the first post, but in this case showing the home button active. When mousing over the other buttons the change colour. This navigation was going to be used on my own running blog but I never got around to setting it up...:

The CSS to style the menu itself looks like this:

#example-nav {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 398px;
    height: 26px;
    overflow: hidden;
}

#example-nav li {
    float: left;
}

#example-nav a {
    display: block;
    background-image: url(/images/css-sprite-example.png);
    padding-top: 26px; /* same as height of #example-nav */
    text-decoration: none;
}

I won't talk about how this works in much detail other than to point out the <a> elements actually contain text, as well as showing the image as a background, and the padding-top pushes the text down so it's not actually visible but the link still works. To read more about this method refer to my first post on the subject.

The styling for the "Home" button looks like this:

#example-nav-home {
    width: 42px;
}
#example-nav-home:hover {
    background-position: 0px -26px;
}

When the mouse moves over the button it changes the position of the background to show the active state. The above CSS can be modified to make the button active based on the body id like so, where #home-page is the id used for <body>. I've highlighted the change in red.

#example-nav-home {
    width: 42px;
}
#example-nav-home:hover, #home-page {
    background-position: 0px -26px;
}

To make this work the <body> would look like this:

<body id="home-page">

Full HTML/CSS

Finally, here's the full HTML and CSS for the page for the above example where it's the home page. For other pages simply change the body id to "events-page", "upcoming-page" etc.

<!DOCTYPE html>
<html>
<head>
<title>CSS Sprites Example</title>
<style type="text/css">

#nav {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 398px;
    height: 26px;
    overflow: hidden;
}

#nav li {
    float: left;
}

#nav a {
    display: block;
    background-image: url(/images/css-sprite-example.png);
    padding-top: 26px; /* same as height of #nav */
    text-decoration: none;
}

#nav-home {
    width: 42px;
}
#nav-home:hover, #home-page #nav-home {
    background-position: 0px -26px;
}

#nav-events {
    width: 53px;
    background-position: -42px 0;
}
#nav-events:hover, #events-page #nav-events {
    background-position: -42px -26px;
}

#nav-upcoming {
    width: 116px;
    background-position: -95px 0;
}
#nav-upcoming:hover, #upcoming-page #nav-upcoming {
    background-position: -95px -26px;
}

#nav-training {
    width: 87px;
    background-position: -211px 0;
}
#nav-training:hover, #training-page #nav-training {
    background-position: -211px -26px;
}

#nav-photo {
    width: 100px;
    background-position: -298px 0;
}
#nav-photo:hover, #photo-page #nav-photo {
    background-position: -298px -26px;
}

</style>
</head>

<body id="home-page">

<ul id="nav">
    <li><a id="nav-home" href="#">Home</a></li>
    <li><a id="nav-events" href="#">Events</a></li>
    <li><a id="nav-upcoming" href="#">Upcoming Events</a></li>
    <li><a id="nav-training" href="#">Running Log</a></li>
    <li><a id="nav-photo" href="#">Photo Gallery</a></li>
</ul>

</body>
</html>


Related posts:


Comments