Learn and share. The simplest harmony.

 

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! :D )

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:


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

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

 

 

This Post Tags :

Bookmark Post :

Pin It
  • 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 :D

  • Don’t work in firefox 3.6.3

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

  • @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.

  • 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

  • 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.

  • 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.

  • Veri useful tabs example. Thanks.