Horizontal Navigation Tabs with State Changes
This a tutorial on how to create horizontal navigation tabs with state changes. Meaning the tab changes appearance when you rollover the tab with your mouse and/or click the tab. You can try it out by clicking on my demo below.
 |
| Click for DEMO |
How I did It
In my HTML document I first created an unordered list, known in syntax as a 'ul' tag. I then added list items, 'li', to the unordered list; each containing the 'a href=""' tag specifying the list item content is a link since they will be linking to other pages. HTML code for this:
<div id="horizontal">
<ul>
<li><a href="#">Vanilla</a></li>
<li><a href="#">Chocolate</a></li>
<li><a href="#">Strawberry</a></li>
<li><a href="#">Mint Chocolate Chip</a></li>
<li><a href="#">Neapolitan</a></li>
<li><a href="#">Moose Tracks</a></li>
</ul>
</div>
Now that we have our framework for the navigation tabs it's time to add a little paint. That's where the CSS comes in. Right away I want to get rid of those pesky bullet points that automatically display with unordered lists. To do this I set 'list-style' to 'none', as you can see in the CSS code below. Second, I want to make this a
horizontal navigation, not vertical as is the default with lists. To do this, I simply set the list items to "float left". You can see how I did this in the code below as well:
#horizontal li
{
list-style-type: none;
color: #ffffff;
float: left;
font-family: Helvetica, sans-serif;
font-size: 16px;
margin: 3px;
}
Rounded Corners
In order to round the corners of the tabs you need to insert a bit of CSS (in this case specifically to the link elements) shown below. As you can see you have to cater to the different browsers with slightly different syntax to do the same thing. In order to increase cross-browser compatibility you'll want to include as many as possible. I believe there is a different way to round corners for IE and a few other browsers, but I chose not to use them it for this particular lab. You can also round the bottom radius' as well if you so choose. However, it is important to note that this method doesn't work for all browsers. When used, it's best viewed in Firefox, Safari and Chrome.
{
#horizontal a
/*--OMITTED--other css styles here--*/
-moz-border-radius-topright: 10px; /*Firefox*/
-moz-border-radius-topleft: 10px;
-webkit-border-top-right-radius:10px; /* Safari and Chrome */
-webkit-border-top-left-radius: 10px;
}
State Changes on hover
In order to help the user experience it is important to let them know something is a button, or is "clickable". To solve this I use hover state changes in my CSS to give the tab a different appearance when someone moves their mouse over the top of the tab. In this case I changed the background color of the tab from a dark green to more of a lime green and everything else stays the same. As you can see in my code below:
#horizontal a:hover
{
color: #ffffff;
background-color: #96c31c;
padding-right: 32px;
padding-left: 32px;
padding-top: 20px;
padding-bottom: 20px;
}
Active State Change
I also wanted the user to know when they were actually clicking a tab so I simply decided to just change the text color to blue since blue is the default link color. I chose to use the default link color of blue because it's what users are used to seeing with links so they would know when they clicked on it that it would be linking them to something outside of that current page. All I had to do to achieve this was set the list items that are links in the active state to a new color.
#horizontal li a:active
{
color: #0c00ff;
}
