Need Hosting for a Wordpress site? Get $90 off @ Dreamhost!

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>
</ul>

The CSS Code

ul#LATabs{
	float:left;
	margin: 0;
	padding:0;
	list-style-type: none;
	width:100%;
	height:75px;
	background: #b71e1a url(bg.gif) center center repeat-x;
	font: 24px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #fff;
	}

ul#LATabs li{
	float:left;
	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

  • Digg Me
  • Bookmark me on Del.icio.us
  • Post to StumbleUpon
  • Tweet Me

2 Responses to “Standards Compliant, Accessible Tabs Using HTML, CSS, and 4 Tiny Images”

  1. George says:

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

  2. George says:

    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.

    i.e.:

    rest of code…

    -George

Leave a Reply

About Me

I'm a web solutions architect with over 15 years of experience working with all sorts of web technologies. I am currently freelancing and am available for hire. I have hands-on experience in all stages of the SDLC. If you or your business needs a new web site or web application please feel free to contact me.

I can help you with: Web Application/Web Site Design and Development, Wordpress Plugin Development, Search Engine Optimization, Search Engine Marketing, Multivariate Testing, Metrics Analysis, Campaign Optimization, Social Site Integration, E-mail Marketing and everything else that has to do with the Web.

I work/haved worked with the following technologies: HTML5, CSS, Javascript, Ajax, jQuery, MySQL, SQL Server, ASP.Net, MVC, c#, Entity Framework, Razor, WCF, OData, PHP, Wordpress, Flash, Google Analytics, Google Adwords, Subversion.

Recent Work

  • Attune Communications
  • Bosse Spa & Style
  • Felicello Law
  • Michael E. McCarthy Scholarship Fund
  • Leonard’s Upholstery
  • Telly’s Cafe
  • InformedU
  • The Survey Initiative
  • Amy Bowen Photography
  • Engel & Schultz

Comments

about this site

This site was built using Wordpress, Jquery and Blueprint, along with HTML, Javascript, CSS, and PHP.

Open source scripts from: Magpie RSS, jCarousel.

Feeds from: Yahoo Pipes, Flickr, Twitter, and De.licio.us.

This site is hosted @ Dreamhost.