“Active” State in CSS Navigations
Tags: Beginner, NavigationI 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.
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.
/*--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.
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!
Không có nhận xét nào:
Đăng nhận xét