Thứ Ba, 22 tháng 3, 2011

“Active” State in CSS Navigations

“Active” State in CSS Navigations

Tags: ,
I am sure you have been on a website where the navigation has an “active” state, basically showing you which page you are currently on. Take a look at my top navigation, you should see that the “Blog” link is in its active state. This technique is what you will be learning today.
Take a look at the demo below to get a preview of what you will be creating. Also if you would like to download the PSD that we will be working with, go right ahead.
Active Navigation with CSS

Foundation – HTML

Start by creating your navigation with an unordered list. Be sure to assign a unique class name to each of the list items.
<ul id="topnav">
 <li class="home"><a href="index.htm">Home</a></li>
 <li class="about"><a href="about.htm">About Us</a></li>
 <li class="services"><a href="services.htm">Services</a></li>
 <li class="portfolio"><a href="portfolio.htm">Portfolio</a></li>
 <li class="contact"><a href="contact.htm">Contact</a></li>
 <li class="blog"><a href="blog.htm">Blog</a></li>
</ul>

Styling – CSS

Strip down the unordered list to bare bones. This will prepare us for the text replacement technique for each of our navigation links.
ul#topnav {
 margin: 0; padding: 0;
 list-style: none;
 float: left;
 width: 960px;
}
ul#topnav li {
 float: left;
 margin: 0; padding: 0;
}
We will be using CSS Sprites, this will basically allow us to have three states (Default, Hover, & Active) for each navigation link.
Active Navigation with CSS
/*--CSS Sprites - Default State--*/
ul#topnav a {
 float: left;
 display: block;
 height: 58px; /*--Specify height of navigation--*/
 text-indent: -99999px; /*--Shoot the text off the page--*/
 background-position: left top;
}
/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
 background-position: left -58px;
}
/*--Assign an image and width to each link--*/
ul#topnav li.home a {
 background-image: url(home_a.jpg);
 width: 120px;
}
ul#topnav li.about a {
 background-image: url(about_a.jpg);
 width: 147px;
}
ul#topnav li.services a {
 background-image: url(services_a.jpg);
 width: 157px;
}
ul#topnav li.portfolio a {
 background-image: url(portfolio_a.jpg);
 width: 182px;
}
ul#topnav li.contact a {
 background-image: url(contact_a.jpg);
 width: 179px;
}
ul#topnav li.blog a {
 background-image: url(blog_a.jpg);
 width: 175px;
}

Setting the “Active” State

We will be adding this “active” state by assigning an ID to the <body> tag on each of our pages. By assigning an ID to each page, we can now specify different properties and values depending on which page it’s on.
So for example, the homepage file should have the <body> tag set like this:
Home Page HTML
...
<body id="home">
...
and the About Us page like:
About Page HTML
...
<body id="about">
...
and so on. Each page should now have its own unique ID on the <body> tag.
Using CSS Specificity to override the default and hover states, we associate each body ID with its matching list item class to set the active state.
The Logic in Plain English
If it’s on the “home” page (body id=”home”) , set the “home” link (li class=”home”) to “active” (background-position: left bottom;).
Now we will apply this logic to cater for all of the pages.
CSS
#home li.home a, /*--Home Page > Home Link--*/
#about li.about a, /*--About Page > About Link--*/
#services li.services a, /*--Services Page > Services Link--*/
#portfolio li.portfolio a, /*--Portfolio Page > Portfolio Link--*/
#contact li.contact a, /*--Contact Page > Contact Link--*/
#blog li.blog a /*--Blog Page > Blog Link--*/
{
 background-position: left bottom;
}
Below is a visual demonstration of how all of this is working together.
Active Navigation with CSS

Conclusion

If anyone has any questions, concerns, or comments please feel free to let me know!

Need Navigation Inspiration?

Check out Design Bombs for some navigation inspiration!
CSS Navigation Inspiration

Related Posts

Không có nhận xét nào:

Đăng nhận xét