WRITTEN BY

ntechi

VN:F [1.9.22_1171]
Rating: 4.2/5 (10 votes cast)

Download

Demo

CSS3 Tabs | NO JAVASCRIPT

Browser Support

TABS, a famous word in website development. Every coder has used it in websites but only using JQuery. Today I ll share a small trick to use tabs without using any JQueries but only using CSS3.

CSS3

Like previous tutorial on CSS3 toggle, in this also we will use pseudo element :target

The logic is really simple, we will form an unordered list, and inside li there will be a div with unique ID, when this unique ID will be called through some href link then the respective div will appear.

So here is the basic HTML Code:

<div id="container">
	<p style="text-align:center;">CSS3 TABS. <b><i>NO JAVASCRIPT&nbsp;</i></b></p>
	<div id="tabs">
		<ul>
			<li id="One"><a href="#One" id="first">One</a>
				<div>
					<p>In today’s tutorial I am going to share a simple way to make News Ticker and Notification Bar using CSS3, NO JAVASCRIPT. Previously it was very difficult to code it in javascript and make it work with other plugins, but today I decided to make it possible in CSS3 and voila, I succeeded So lets</p>
				</div>
			</li>
			<li id="Two"><a href="#Two" id="sec">Two</a>
				<div>
					<p>While reading more about HTML5 & CSS3 I just found an amazing css3 button styling. This time I wanted to do something which I was doing from past 2 years using JQuery. In this tutorial I am going to teach you how to make a toggle slideDown and slideUp function using CSS3 and HTML5. To</p>
				</div>
			</li>
			<li id="Three"><a href="#Three" id="third">Three</a>
				<div>
					<p>Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first Read more...</p>
				</div>
			</li>
		</ul>
	</div>
</div>

We will be using transition to show the fade in fade out effect using opacity. On click of href the transition will be triggered and the opacity of the div changes.

CSS

li div {
    -moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
    border: 1px solid #888888;
    float: left;
    opacity: 0;
    padding: 0 15px;
    position: absolute;
    visibility: hidden;
    width: 250px;
	left:0;
	background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;
}

#tabs li a{
    background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
    border: 1px solid #888888;
    margin: 0 3px 0 0;
    padding: 5px 25px;
    position: relative;
	z-index:1;
	font-size: 14px;
	border-radius:10px 10px 0 0;
	display:block;
	top:1px;
}

#One:target div, #Two:target div, #Three:target div{
	opacity:1;
	visibility:visible;
}

You can download and check the demo, share it if you like it and suggestions are always welcome.

CSS3 Tabs | NO JAVASCRIPT, 4.2 out of 5 based on 10 ratings

Download

Demo

  • Miller

    it does not display the tab content in ie 8

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Ntechi

      IE8 does not supports CSS3, in IE9 it will work

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • http://www.illi-pro.com/ illi.pro

    Nice tutorial, but it’s possible to make this CSS3 Tabs compatible with IE6-IE8? and how to do it?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Ntechi

      You cant do that cause IE6 – 8 css3 is not compatible.

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
      • http://www.illi-pro.com/ illi.pro

         with any trick? how about that famous “Minimizr”?

        VA:F [1.9.22_1171]
        Rating: 0.0/5 (0 votes cast)
        VA:F [1.9.22_1171]
        Rating: 0 (from 0 votes)
        • Ntechi

          You can do that by using some js, but if you really want to use that then I would prefer Jquery tabs

          VA:F [1.9.22_1171]
          Rating: 0.0/5 (0 votes cast)
          VA:F [1.9.22_1171]
          Rating: 0 (from 0 votes)
          • http://www.illi-pro.com/ illi.pro

             Actually I use jQuery Tab Slider but I would like a lot to change this for CSS 3 Tab Slider, but I still receiving 25% from IE 6-8 :( there’s a way to make compatible via JS but only for IE6-8?

            VA:F [1.9.22_1171]
            Rating: 0.0/5 (0 votes cast)
            VA:F [1.9.22_1171]
            Rating: 0 (from 0 votes)
          • Ntechi

            I have never used it, but heard a lot about it

            http://css3pie.com/

            It makes CSS3 compatible in IE6-8

            VA:F [1.9.22_1171]
            Rating: 0.0/5 (0 votes cast)
            VA:F [1.9.22_1171]
            Rating: 0 (from 0 votes)
  • http://twitter.com/QueryCreative Joshua Schmitz

    I’ve got an idea, drop all support for IE issues concerning such bleeding edge tech.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • JT

    Nice CSS only difficulty I’m having is when I’ve got the tabs in a page (half way down) and each tab has loads of content in it causes an overflow issue. I suspect it’s to do with position: absolute any clues/work rounds anyone might have it would save me going prematurely bald?
    http://www.intracrop.co.uk/new-site-2/adjuvants.html
    one other thing who to display tab #one on page open?
    Cheers
    J

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • JT

    great css, only one issue hopefully someone can help with, I’ve got the tabs at the bottom of my page, if I put too much in each content it causes overflow issues,
    http://www.intracrop.co.uk/new-site-2/adjuvants.html#One
    also other than setting the link to #One is there any way to open the page with the first tab open?
    Cheers JT

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • slwf

    Wish it worked on Android ICS.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Fhchgf

      Just install Chrome.

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • settr

    How can i get visible block “one” by default?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • yosmomas Bli

    awesome. this is perfect for what i’m doing. Jquery or javascript was not doing it. As soon as I clicked on a different tab all live actions on the selected tab stopped. THIS WORKS GREAT. I can see this as a library.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)