Pure CSS Tab Menu on Webkit-based Browser

Posted on January 21, 2010 and got 12 shouts so far

Updated techique and demo click here. In this implementation, we’re going to discuss how to make tabbed menu only by using CSS on your Safari or Chrome browser. The tabbed menu will have 4 tabs each with different contents. If a tabbed is selected, its content will ease-in and be displayed while the content of previous tab appeared will ease-out and be hidden.

To make transition above, we simply need CSS only and Safari or Chrome (Webkit-based) browser (which provides the webkit-transition property). Take a look at the following explanation from webkit official website:

“The simplest kind of animation that we’ve added support for is called a transition. Normally when the value of a CSS property changes, the rendered result is instantly updated, with the element in question changing immediately from the old property value to the new property value. Transitions describe how to instead execute an animation from the old state to the new state over time.”

Now, let’s talk about how we can trigger the transition. Here we use Pseudo Selector focus which means that if we focused on an input element, a transition will run. So, we will use this input element on the tabs. Check this script out:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Each menu will be classified into a div. For the menu tab we define it into an element named input while the content we define into a div with class “content”. In order to avoid cursor blink while we choose the menu (input element), we add a readonly attribute inside.

	body {
		background: url('images/background.png') top left repeat-x;
		text-align: center;
		line-height: 1.5em;
		font-size: 13px;
	}

	#container {
		margin-top: 5%;
		margin-left: auto;
		margin-right: auto;
	}

	.menu {
		margin-left: auto;
		margin-right: auto;
		position:relative;
		width: 390px;
		height: 300px;
		background: url('images/transparent.png');
		text-align: left;
		color: #fff;
		overflow:hidden;
		-webkit-border-radius: 5px;
	}

	.one, .two, .three, .four {
		width: 250px;
		float: left;
		position: absolute;
	}

	.one-menu, .two-menu, .three-menu, .four-menu {
		position: absolute;
		display: inline;
		width: 100px;
		height: 30px;
		margin:0;
		padding: 0;
		background: url('images/background-menu.jpg');
		text-align: center;
	}

	.two {
		margin-left: 7.5em;
	}

	.three {
		margin-left: 15em;
	}

	.four {
		margin-left: 22.5em;
	}

	.content {
		-webkit-transition: all .5s ease-in-out;
		opacity: 0;
		margin-top: 3.5em;
		width: 370px;
		padding: 0 10px;
	}

	input {
		border: 0;
		cursor: pointer;
		background: none;
		color: #daf2fa;
		text-shadow: 0px 1px 0px #041217;
		font-size: 15px;
	}

	.one-menu:focus, .two-menu:focus, .three-menu:focus, .four-menu:focus {
		background: none;
		outline: none;
		cursor: pointer;
	}

		.one-menu:focus + div.content {
			opacity: 1;
		}

		.two-menu:focus + div.content {
			opacity: 1;
			margin-left: -7.5em;
		}

		.three-menu:focus + div.content {
			opacity: 1;
			margin-left: -15em;
		}

		.four-menu:focus + div.content {
			opacity: 1;
			margin-left: -22em;
		}

	.title {
		font-size: 25px;
		font-weight: bold;
		margin-bottom: 1em;
		text-shadow: 0px 1px 0px #93bdcb;
	}

First, we put the menus (inputs) into horizontal menu list, and then we hide their content by changing the opacity property into 0. Then we add webkit property transition so as to make an automatic transition if there’s either position or opacity change.

The important thing from this menu are :

.one-menu:focus + div.content {
	opacity: 1;
}

.two-menu:focus + div.content {
	opacity: 1;
	margin-left: -7.5em;
}

.three-menu:focus + div.content {
	opacity: 1;
	margin-left: -15em;
}

.four-menu:focus + div.content {
	opacity: 1;
	margin-left: -22em;
}

We will show the content of chosen tab by changing the opacity into 1. Since we have injected the content with webkit transition, the opacity change will happen softly. OK, so far we have finished the tab. But there’s still an unsolved problem; I still don’t know how to make the default content for the menu(s) that haven’t been chosen. If you got an idea how to crack this problem, it will be lovely to discuss it on the following comment box. Thanks!

You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed. If you like this post, your sharing and feedback would be very appreciated

Show Implementation

Download Source

This Post Tags :

Bookmark Post :

Save on Delicious

waterbomm January 21, 2010 at 4:24 pm

I think, it’s better to use javascript.

Reply
Hidayat Sagita January 22, 2010 at 7:27 pm

It’ll be very simple if we use JavaScript, but for different purpose using pure CSS also a better choice

Reply
waterbomm January 23, 2010 at 8:10 am

ok. thanks for the advice

Reply
Dave Sparks January 25, 2010 at 6:11 pm

A nice implementation, I posted a similar tutorial but using only hover states a while ago
http://www.kamikazemusic.com/quick-tips/css3-hover-tabs-without-javascript/

The default content could be done by setting focus with javascript on load but that does slightly detract from the whole not using javascript.

Reply
Hidayat Sagita January 25, 2010 at 6:22 pm

Yours are great
For autofocus in an input, HTML5 was provide with property autofocus, but when i implemented it still not working because the input has readonly property.

Reply
Tutorijali HDonWEB February 3, 2010 at 1:16 am

Great tutorial

Reply
Hidayat Sagita February 3, 2010 at 5:37 am

Thanks! Hope it’s useful
You can get updated technique and demo in here http://www.webstuffshare.com/2010/01/updated-pure-css-tab-menu/

Reply
Beben March 16, 2010 at 7:09 am

yang ini berjalan bagus…:)

Reply
Pred June 11, 2010 at 3:18 pm

Could someone tell me how to make default content load? The updated technique will not work for me since it conflicts with the framework I use (the hrefs). Javascript would be fine, but I dont know anything about it.
Could someone help me?

Reply
Hidayat Sagita June 11, 2010 at 3:24 pm

@Pred
You can use jQuery and add this on your webpage

$(document).ready(function() {
$(‘.one-menu’).focus();
});

So the first tab will have autofocus on page load.

Reply
James June 5, 2011 at 6:01 pm

Hi,

Thanks so much for this. Everytime I click on the content, it disappears. I don’t want this. How do I remove this feature?

Thanks !

Reply
- Hidayat Sagita June 6, 2011 at 7:15 am
  
  Hi James,
  
  There’s an update for this tutorial (including your request), you can check this post http://www.webstuffshare.com/2010/01/updated-pure-css-tab-menu/
  
  Reply