Standards Compliant, Accessible Tabs Using HTML, CSS, and 4 Tiny Images

Download Source Code

View a Demo

Horizontal navigation menus are one of the (if not THE) most common user interface elements used across the web. They provide an easy way for a user to both navigate a web site as well as quickly determine, at a glance, what section of the web site they are currently on.

My Requirements

  • Must degrade gracefully when style sheets are turned off
  • Must be fully accessible
  • Must validate to W3C standard
  • Must be light-weight and simple
  • Must provide ability to change colors without having to modify images
  • Must be able to turn a tab on by simply adding a class

The code below generates a customizable horizontal, tabbed menu with a set height of 75 pixels. If you want to change the height of the menu you will have to create new images and also modify the height settings in the CSS code. With that in mind, I have included the Photoshop file I used to create the menu in the zipped archive for you to reference.

I have tested this in Firefox (2,3,3.5), IE7, IE8, Safari, Opera, and Chrome and it looks good across all of them (if you experience an issue in another browser, please let me know by commenting on this post).

The Plan

The HTML Code

<ul id="LATabs">
	<li class="current_page_item"><a href="" title="Home"><span class="tLeft"></span><span class="tMid">Home</span><span class="tRight"></span></a></li>
	<li><a href="" title="Menu Item 1"><span class="tLeft"></span><span class="tMid">Menu Item 1</span><span class="tRight"></span></a></li>
	<li><a href="" title="Menu Item 2"><span class="tLeft"></span><span class="tMid">Menu Item 2</span><span class="tRight"></span></a></li>

The CSS Code

	margin: 0;
	list-style-type: none;
	background: #b71e1a url(bg.gif) center center repeat-x;
	font: 24px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #fff;

ul#LATabs li{
	padding: 0;
	height: 75px;
	margin: 0 10px;

ul#LATabs a{color:#fff;text-decoration: none;cursor: pointer;}
ul#LATabs a:hover{color: #e3e3e3;}

ul#LATabs .current_page_item a{color: #b71e1a;}
ul#LATabs .current_page_item a:hover{color: #b71e1a;}

ul#LATabs span{float:left;height: 75px;}
ul#LATabs .tLeft, ul#LATabs .tRight{width:8px;}
ul#LATabs .tMid{padding: 23px 15px 0px 15px;}

ul#LATabs .current_page_item .tLeft{
	background-image: url(tab_01.png);
	background-position: top left;
	background-repeat: no-repeat;
ul#LATabs .current_page_item .tMid{
	background-image: url(tab_02.png);
	background-position: top left;
	background-repeat: repeat-x;
ul#LATabs .current_page_item .tRight{
	background-image: url(tab_03.png);
	background-position: top left;
	background-repeat: no-repeat;

The 4 Tiny Images

bg.gif bg.gif bg.gif bg.gif

The End Result

Download Source Code

View a Demo

2 thoughts on “Standards Compliant, Accessible Tabs Using HTML, CSS, and 4 Tiny Images”

  1. [div style=”width:100%; height:75px; background:#b71e1a url(bg.gif) center center repeat-x”]
    [ul id=”LATabs” style=”width:600px;”]

  2. Good stuff Leon.

    The only issue I see is that when the browser window is re-sized to a width that is smaller than 600px (the width of the UL tag), the tabs get stacked on top of each other. To remedy this I would wrap a DIV tag around the the UL tag and give the DIV a 100% width and give the UL an absolute width.


    rest of code…


Leave a Reply

Your email address will not be published. Required fields are marked *