Tab menus can be an elegant part of your design, but how can you make the image design come to life on a web page using HTML and CSS? In this tutorial we’ll look into how you can make tab menus. Something which seems so simple but is actually quite difficult to figure out on your own. You’ll need intermediate CSS knowledge for this.

1. We start by adding some simple markup for the menu in HTML, but we include <span> tags in the anchor elements. Notice that the <li> elements in ul list don’t have spaces or line breaks between them, that’s because I don’t want undesirable spaces to show up between my tabs.


		<ul id="menuhor">
			<li><a href=""><span>Link 1</span></a></li><li><a href=""><span>Link 2</span></a></li><li><a href=""><span>Link 3</span></a></li><li><a href=""><span>Link 4</span></a></li>
		</ul>

2. Now we need 2 types of images. Our tabs are going to have some interactiveness in them as well. Because the text content in the tab varies in length, we need one image that’ll be on the left side, and one for the right side. So here’s the tab image that I have prepared for this tutorial:

That consist of the following two images side-by-side

Now, here’s another one to be shown when the mouse is hovering on it:

(note: this is also divided into 2 images)

The text is of course going to be added later with markup, but that is a test in the image.

3. Now moving on, let’s style our “tabs”. Let’s add some CSS to the mix, everything that needs explaining is explained in the CSS comments in the codebox.

#menuhor {
	list-style-type: none; /* disabling list images */
	padding: 0;
	font-family: tahoma, arial; /* setting some fonts */
}

#menuhor li {
	display: inline; /* turning it to a horizontal menu */
}

#menuhor li a {
	display: block; /* converts the anchor tag into a box element, thus letting us set attributes which we couldn't otherwise */
	float: left; /* Since we set display: block,  now the links want to each be on their own rows, so we set float: left for them to be on the same row */
	margin-left: 2px; /* setting how much space we want between the tabs */
	padding: 0 0 0 30px; /* 30px padding on the left because the left side of the tab image is 30px wide, so we give it space */
	text-decoration: none; /*removing underlines from links */
	background: url("leftab.png") no-repeat left top; /* adding and aligning the background image */
	cursor: hand; /* in Internet explorer 7 (and maybe others), the cursor changes in a weird way when you hover from anchor to span, so with this, you'll always get the same hand pointer for the links */
}

#menuhor li a span {
	display: block; /* turning span into a box element so we can add padding to widen up the anchor tag and reveal the whole background image */
	float: left; /* these float to left too, for the same reason as the last time */
	padding: 8px 30px 5px 0px; /* setting padding so the button/tab has a desired size and we can fully see the tab image background */
	font-size: 20px;
	color: white; /* applying text color */
	background: url("rightab.png") no-repeat right top;
}

#menuhor li a:hover {
	background: url("lefthovertab.png") no-repeat left top; /* when hovered on the link, the background image changes */
}

#menuhor li a:hover span { /* this is for the buttons to change in color when hovered on */
	color: #414AB6; /* text color changes from white to dark blue to add to the hover effect */
	background: url("righthovertab.png") no-repeat right top;
}

Combining the CSS and HTML, we get this.

There is also another way to deal with the background images. Using sliding doors is quite usual, and you can implement that easily into this code as well. You simply combine the hover and non-hover images on top of each other in one image and set the background image to be realigned (meaning you set them negative values from the top so you can move the bottom part of the image to be visible. I will not go in much detail regarding this. If you want to learn more about sliding doors and see it demonstrated, read this article: http://tutoriary.com/html-css/shifting-background-with-one-image-2/.

Don’t forget to comment!