Defining the Active State of Menu Sections for a CSS Sprite-Based Navigation Bar

In reality, creating the visual presentation for the “active” state of each section of this example navigation bar is a two-step process that must be performed in the following order: first, it’s necessary to code the CSS styles that will give the sections their correct appearance, and then modify the bar’s structural markup to indicate which of these sections is currently viewed by the user.

In a real-world environment, this last step should be accomplished dynamically via a server-side language such as PHP or Ruby; however, for demonstrative purposes in this tutorial, I’ll be showing how to do this statically.

Having explained that, here’s the new set of CSS styles that uses the earlier CSS sprites to define the “active” state of the aforementioned sections:

/* About section */

ul#navbar li#about a.active {

background: #800040 url("bg_navbar.png") -260px 0 no-repeat;

}

/* Services section */

ul#navbar li#services a.active {

background: #800040 url("bg_navbar.png") -260px -100px no-repeat;

}

/* Products section */

ul#navbar li#products a.active {

background: #800040 url("bg_navbar.png") -260px -200px no-repeat;

}

/* Articles section */

ul#navbar li#articles a.active {

background: #800040 url("bg_navbar.png") -260px -300px no-repeat;

}

/* Blog section */

ul#navbar li#blog a.active {

background: #800040 url("bg_navbar.png") -260px -400px no-repeat;

}

/* Contact section */

ul#navbar li#contact a.active {

background: #800040 url("bg_navbar.png") -260px -500px no-repeat;

}

As seen in the previous code sample, creating the “active” state of every bar section is done simply by assigning a class called “active” to its building links, which also requires modifying the X and Y coordinates of the corresponding background image to display the correct portion of it. Of course, at this point the inner working of this process should be pretty familiar to you, as it’s very similar to other examples shown in this and previous tutorials of the series.

Well, having created the CSS styles that define the “active” state of the sections of the navigational bar, we need to modify its markup, so this state can be properly reflected visually.

This process will be discussed in the following segment. Therefore, to learn more, click on the link below and keep reading.