Dan Olsavsky's Blog

Thursday, November 8, 2007

CSS Rollovers for Top Navigations

This is an oldie but a goodie. This is a good foundation for those whom would like to take the next step and add rounded corners via CSS.

The Objective.

Create a SEO friendly top navigation using CSS to control image rollovers.

The HTML.

<ul>
<li><a href="#"><span>home</span></a></li>
<li><a href="#"><span>about</span></a></li>
<li><a href="#"><span>this</span></a></li>
<li><a href="#"><span>that</span></a></li>
<li><a href="#" class="ninetytwo"><span>the other</span></a></li>
</ul>

The CSS.

(note: i have added a class to control the width of the end list item. This came about because I have one list item that is smaller than the rest. I changed the color of the list item so you can see which one I am referring to.)

/* global selectors */
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 463px;
height: 45px;
}
ul li{
float: left;
}
ul li a span{
display:block;
margin: 10px 0px 0px 0px;
text-align: center;
}
/* 93 px wide nav elements */
ul li a{
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
height: 45px;
width: 93px;
background-color: #eee;
}
ul li a:hover{
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
height: 45px;
width: 93px;
background-color: #aaa;
}
/* 92 px wide nav elements */
ul li a.ninetytwo{
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
height: 45px;
width: 92px;
background-color: #000;
}
ul li a:hover.ninetytwo{
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
height: 45px;
width: 92px;
background-color: #ccc;
}

The Rest.

Change the background colors to background images.

The Example.

http://danolsavsky.com/css-top-nav-rollover.html

posted by dano at 10:16 AM

0 Comments:

Post a Comment

<< Home

© Dan Olsavsky | 2004-2009. This site is optimized for viewing in Mozilla's Firefox. Some features may not appear in other internet browsers. Please note that I do not develop the content for the websites featured in my portfolio. I do however, work with some phenomenal writers that can get the job done. The Search Engine Optimization on most of the sites was done by a highly-skilled professional at Page 1 Solutions, LLC. Some of the websites have been edited aesthetically by other Website Design Professionals but I keep the Lightbox images original, because I like to keep it real. I am employed full-time, however... you too can retain my services at a very reasonable rate! A huge shout out to everybody who has helped me along the way and who continue to support me. You know who you are.. Click here to view the Sitemap or click here to Contact me.