Navigation is a crucial aspect of every website, and in the vast majority of designs they are a focal point. Rollovers are fairly standard these days but a lot still use JavaScript – it’s far quicker, simpler and is considered all-round better practice to use CSS for this instead.
Click here to view a demo of the CSS rollovers
HTML
For the HTML it is as simple as adding a ‘class’ into the link tag.
<a href=”#” class=”button”>Button 1</a>
<a href=”#” class=”button”>Button 2</a>
<a href=”#” class=”button”>Button 3</a>There is no longer the need for JavaScript ‘preload image’ or ‘swap image’ functions taking up large chunks of code. The JS method is not only lacking cross-browser compatibility as some early browsers don’t support JavaScript (and some users disable it altogether), but it is also terrible for search engine optimisation due to the extra code the spiders had to crawl through.
CSS
In this example I am simply going to change the background colour. If you have knowledge with CSS you can use an image instead with the ‘background-image’ property. If you want to use an image with a custom (non-web) font as part of it then set the ‘text-indent’ property to -10000 which will essentially hide the HTML text by moving it 10000 pixels to the left.
I often use this technique as it allows far more flexibility in terms of the design.
The top class provides the default style for the button, the second style is what it will change to when the mouse hovers over the button.
.button{
padding: 10px;
margin: 0px 1px 0px 0px;
background-color: #006633;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
.button:hover{
background-color: #000000;
text-decoration: none;
}
Conclusion
It really is that simple to add rollovers to your navigation – and did I mention its cross-browser compatible? I will be focussing the next couple of blog entries on navigation including keeping tabs highlighted on relevant pages, and a cross-browser dropdown menu (its amazing how few there are, trust me).
There are no files provided with this article. However if you open up the demo and view the source it is easy for you to access the code :o).
Bookmark / Share
Subscribe
