In this article I am going to show you how you can make an accessible CSS based rounded tab menu using some semantic HTML and a few images.
You can view the demo here.
You’ll see some similarity between this technique and A List Apart’s Sliding Doors menu, however there is one key difference between this technique and theirs and that is that the tabs on this menu are fully clickable. If you go to their working demo page, you will notice that you cannot click on the left portion of the tab which, for me, was not ideal.
Also, one other issue I had with ALA’s menu was that when clicked, it would leave a hit area highlight around only part of the menu item, rather than the whole menu item, which looks strange if you are using this menu in any sort of JavaScript menu or any menu that does not force the page to reload.
To solve this issue, I added an extra (somewhat) semantic span tag to the markup to create the desired rounded effect, while rendering the tab fully clickable. So, with that, here is the HTML we are going to start with:
The HTML
<ul id="menu">
<li><a title="Link title here" href="#"><span>Home</span></a></li>
<li><a title="Link title here" href="#"><span>About</span></a></li>
<li><a title="Link title here" href="#"><span>Portfolio</span></a></li>
<li><a title="Link title here" href="#"><span>Services</span></a></li>
<li><a title="Link title here" href="#"><span>Testimony</span></a></li>
<li><a title="Link title here" href="#"><span>Contact</span></a></li>
</ul>
Which will give you something like this:
Basic Styling
Now we need to add some basic CSS for stlying. We need to make the menu run inline and to remove the default list formatting:
#menu {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
float: left;
}
#menu a {
float: left;
display: block;
}
After adding the CSS to the page, we should get something like this:
Making It Pretty
OK, so now we have an inline menu, but it’s not too pretty is it? Well, now we’re going to spruce it up a bit by adding some padding and text styling with some CSS and we’re also going to style the span tags that we added in to the HTML as well:
#menu {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
float: left;
}
#menu a {
float: left;
display: block;
padding-right: 16px;
padding-left: 0;
font-weight: bold;
color: #666;
text-decoration: none;
cursor: pointer;
}
#menu a span {
float: left;
padding-top: 8px;
padding-bottom: 6px;
padding-left: 16px;
cursor: pointer;
}
What we did here was applied some padding to the right of the link and some padding to the left of the span tag to center the text in the tab. We also applied the “cursor” property to the span tag to make sure that the browser treats it as a link by showing the pointer icon when the user hovers over it with their mouse. You should see something like this:
Adding The Rounded Tabs
Now that we have a properly padded and colored menu, we need to add in the images that will create the rounded corner effect:
#menu {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: url(images/bg_menu.png) repeat-x left bottom;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
float: left;
display: block;
background: url(images/bg_menu_right.png) no-repeat right top;
padding-right: 16px;
padding-left: 0;
font-weight: bold;
color: #666;
text-decoration: none;
cursor: pointer;
}
#menu a span {
float: left;
background: url(images/bg_menu_left.png) no-repeat left top;
padding-top: 8px;
padding-bottom: 6px;
padding-left: 16px;
cursor: pointer;
}
With the images in, we should see our menu looking about like this:
Looks pretty neat huh? Well now all we have to do is tweak a few little things and we should be good to go!
Finishing It Up
To finish things off, I am going to add in a little line in the background to tie the tabs together as well as give the tabs a hover state so they are interactive. One other little thing I am going to add is an “on” state which can be used to show which tab’s content is active on the page. So lets add in the CSS now and see what we can do:
#menu {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: url(images/bg_menu.png) repeat-x left bottom;
}
#menu:after {
content: " ";
clear: both;
display: block;
visibility: hidden;
height: 0;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
float: left;
display: block;
background: url(images/bg_menu_right.png) no-repeat right top;
padding-right: 16px;
padding-left: 0;
font-weight: bold;
color: #666;
text-decoration: none;
cursor: pointer;
}
#menu a span {
float: left;
background: url(images/bg_menu_left.png) no-repeat left top;
padding-top: 8px;
padding-bottom: 6px;
padding-left: 16px;
cursor: pointer;
}
#menu a:hover {
background: url(images/bg_menu_hover_right.png) no-repeat right top;
color: #333;
}
#menu a:hover span {
background: url(images/bg_menu_hover_left.png) no-repeat left top;
}
#menu .on, #menu .on:hover {
background: url(images/bg_menu_on_right.png) no-repeat right top;
color: #000;
}
#menu .on span, #menu .on:hover span {
background: url(images/bg_menu_on_left.png) no-repeat left top;
}
You’ll notice I added in a CSS rule for #menu:after. That piece of code is called a clearfix, which clears the floats used in the menu so that it does not overlap content below it. If you did not have this clearfix, the content following the menu will wrap around, causing many undesirable effects.
So now, after you’ve added the above CSS, you should see your menu looking about like this:
The “Home” tab has the class “on” applied to it and the “Contact” tab shows what the hover should look like. Now you’re done! Congrats!
Conclusion
And there you have it, an accessible, semantic rounded tab menu built with some lean HTML, a smidgen of CSS and a few images.
I have included the PSD files I used to create the tabs in the Zip file so that you can easily make your own, custom styled menus.
I hope you enjoyed this tutorial! If you’ve got any questions or feedback, please feel free to leave a comment below.