Updated : Pure CSS Tab Menu

Posted on January 27, 2010 and got 8 shouts so far

When I was browsing about CSS pseudo-selector, I found a similar post to Pure CSS Tab Menu I wrote for the previous post. The article written by Paul Hayes discusses how to make an accordion only with CSS. The implementation is able to run the script automatically from the start. I mean, it shows one of the accordion’s content as a default so you don’t have to wait until you click one of the accordion in order to see the content (thing that hasn’t done yet for our Pure CSS Tab Menu, aufklarung! )

Paul Hayes used pseudo-selector :target to get the things done. The :target itself reads the section that is being selected. For example, look at the following structure:


	
		content

With the url :

http://myurl.com#one

So we can access or add a stylesheet to the element we are choosing (in this case we use element p with id one) this way:

.menu :target {
	/* add some style */
}

Ok, here when the user accesses an alement with id one (http://myurl.com#one), the script will automatically read that the element one is the target (.menu :target). By using this technique, we can show the first tab menu automatically when the webpage is first opened. So, by adding #one into our default page url, the CSS will be like this:

HTML

Pure CSS Tab Menu

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.

CSS

	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;
	}

		.menu :target a input {
			background: none;
			outline: none;
			cursor: pointer;
		}

		.menu :target a#one-menu + div.content {
			opacity: 1;
		}

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

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

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

	a, a:visited, a:hover {
		color: #ffffff;
		text-decoration: none;
	}

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

We make the element input as a child of element a, so when the element a is chosen, the url will also change (whether into #one, #two, #three, etc.) and the input will automatically be chosen, hence we can still add the pseudo-selector :focus to the input in order to add a stylesheet to chosen input.

.menu :target a#one-menu + div.content {
	opacity: 1;
}

On the element with its class menu that is becoming the target with child element a and id one-menu, we change the opacity sibling (div content) into 1.

Ok, this is our pure CSS tab menu that can choose the menu automatically at the time the webpage is opened. In other words, the script we made is now running perfectly. Thanks for reading. 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 :

Pin It

Beben March 16, 2010 at 7:10 am

yang ini kok sedikit roaming…hohoho
sorry to say nih yaaa…kalo bisa jgn pake unique ID yg sudah umum bawaan template blog…jadi bentrok deh
pusing gnedit2nya kalo mau dimasukkin ke blognya juga

Reply
Truper April 23, 2010 at 7:16 pm

Don’t work in firefox 3.6.3

Reply
kennyD April 24, 2010 at 6:37 pm

Second that, it doesn’t work as intended in Firefox 3.6.3

Reply
Hidayat Sagita April 24, 2010 at 7:18 pm

@Truper & @kennyD :
Maybe you missed the first tutorial : Pure CSS Tab Menu on Webkit-based Browser.

The tutorial aims to create pure css tab menu on webkit-based browser, and this tutorial is an updated version from the previous one.

Reply
jo bigs January 26, 2011 at 7:40 pm

This needs to be something that can be injected into css frameworks and support tabbed ui across all mobile phones!

Seek Cross-Browser Common Denominator:

BBerry
iPhone
Android
Symbian
iPad
etc

Reply
Janar February 25, 2012 at 6:00 pm

As I’m looked for a way to have tabbed content (familiar to demo on this page) for usage in google sites, (witch is hard to achieve, especially if you are unfamiliar with scripting skills like CSS or Java script). So I tried out this one and I think, this one is one first ones, that actually worked. but its script need some modification due google.sites limitations. I added object tags for it, inserted CSS content between tags (is it inline css). and used absolute links instead of relative ones (full path to image file). here is what I achieved: https://sites.google.com/site/katselusi/workingtabs-gadget.

Only posted this because thought this would be useful info for others to.

Reply
Janar February 25, 2012 at 6:17 pm

It worked with ie9 and google on win7, even thought title area gets hidden after click on tab (perhaps it can be used as an effect, so it shows content only after click on tab, but nice way, without this buggy taste). It didn’t worked with Amaya (since lack of support between browser and sites service). But I think, as google.sites turns this script part into app, it may support other modern browsers too, witch support google.sites (ie: firefox, opera, safari). I’m quite sure you (as any other site viewer) get best results with up-to-date browser.

Reply
Ali November 26, 2012 at 12:33 am

Veri useful tabs example. Thanks.

Reply