Pure CSS Tab Menu on Webkit-based Browser

January 21

10 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:

<div class="menu">
		<div class="one">
			<input class="one-menu" value="Latest" readonly="readonly" />
			<div class="content">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. </div>
		</div>
		<div class="two">
			<input class="two-menu" value="Today" readonly="readonly" />
			<div class="content"><img src="images/image.png" style="float: left; margin-right: 1em;" />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. </div>
		</div>
		<div class="three">
			<input class="three-menu" value="This Week" readonly="readonly" />
			<div class="content">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. </div>
		</div>
		<div class="four">
			<input class="four-menu" value="This Month" readonly="readonly" />
			<div class="content">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.</div>
		</div>
	</div>

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

Tags : CSS Free Stuff Menu

Share : Pure CSS Tab Menu on Webkit-based Browser (via @hdytsgt)

Similar Stuffs

waterbomm

January 21, 2010 at 4:24 pm

I think, it’s better to use javascript.

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

waterbomm

January 23, 2010 at 8:10 am

ok. thanks for the advice

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.

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.

Tutorijali HDonWEB

February 3, 2010 at 1:16 am

Great tutorial

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/

Beben

March 16, 2010 at 7:09 am

yang ini berjalan bagus…:)

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?

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.

How To Create iPhone-Style Navigation (Part I)
This post has got 23 shouts so far
jQuery Plugin : jConfirmAction
This post has got 34 shouts so far
iPhone-Style Navigation:AJAX + Rotate (Part II)
This post has got 12 shouts so far
Simple Flip Puzzle Effect with jQuery
This post has got 6 shouts so far
Howto Create Mac-like Login Form
This post has got 7 shouts so far
Implement Password Strength Meter & Gauge.js
This post has got 8 shouts so far
Stylize Your Own Checkboxes
This post has got 15 shouts so far
Create Animated Navigation Menu From Stratch
This post has got 7 shouts so far

showing database connection error… to check...
by melwyn on Pikachoose : Another jQuery Plugin for Image Gallery
Great article! I’m from Brazil, I’ve been following your...
by Thiago on [CodeSnippet] CSS3 Flying Menu
Looks nice
by TheShadow on Filter Image View Using jQuery
Nice drop down menu tutorial.
by TheShadow on Simple CSS3 Dropdown Menu
love your site
by eJobsViet on Free Web UI Element Pack

Pure CSS Tab Menu on Webkit-based Browser

[Community News] jQuery Fundamentals

RGraph : HTML5 Canvas Graph Library

jQuery Plugin : jQuery iPhone UI

Pikachoose : Another jQuery Plugin for Image Gallery

HTML5 Security Cheatsheet

[Community News] How to turn any jQuery plugin into a Wordpress one

Zoom Your Element Using Zoomooz.js

[Community News] Build a Flash-like Game With Scripty2

[Community News] CSS3 Transitions available on Firefox 3.7

[Community News] CSS from the Ground Up