Skip to main content

Responsive Pure CSS Tabs

demo download

Okay, so we are going to make responsive pure css tabs or Tabbed navigation which is quite interactive when it comes to quickly accessible content. It can be used in dashboards, product page etc. So, let’s straight jump in to our mark-up.

We are going to make it with the help of Radio buttons. We will also use font awesome icons to make it look good. Let’s say we need 5 tab for 5 different menus. Our mark-up will be like:


<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><i class="fa fa-code"></i><span>Code</span></label>

<input id="tab2" type="radio" name="tabs">
<label for="tab2"><i class="fa fa-pencil-square-o"></i><span>About</span></label>

<input id="tab3" type="radio" name="tabs">
<label for="tab3"><i class="fa fa-bar-chart-o"></i><span>Services</span></label>

<input id="tab4" type="radio" name="tabs">
<label for="tab4"><i class="fa fa-folder-open-o"></i><span>Portfolio</span></label>

<input id="tab5" type="radio" name="tabs">
<label for="tab5"><i class="fa fa-envelope-o"></i><span>Contact</span></label>

We will hide the input boxes, you can either hide it through

display:none;

or

position: absolute; top:-9999; left:-9999;

input {
  display: none;
}
label {
  display: block;
  float: left;
  width: 20%;
  color: #757575;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background: #f0f0f0;
}

Now let’s put content for each tab and give each section a specific ID.


<section id="content1" class="tab-content">
<!--content goes here-->
</section>
<section id="content2" class="tab-content">
<!--content goes here-->
</section>
<section id="content3" class="tab-content">
<!--content goes here-->
</section>
<section id="content4" class="tab-content">
<!--content goes here-->
</section>
<section id="content5" class="tab-content">
<!--content goes here-->
</section>

We need to first hide the content inside of each section, as


section {
  display: none;
}

Now we have to display the content when a particular tab is checked, for this situation our CSS code will be


#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
  display: block;
}

Okay, it was the functional part, how about some animation, and styling and Of course, let’s also not forget that we have to make it responsive as well. Since we have to highlight each selected tab and label, we can do it as below,


.tab_container [id^="tab"]:checked + label {
  background: #fff;
  box-shadow: inset 0 3px #0CE;
}

Responsiveness:

We can hide the name of the tab instead let’s only show icon for the tab when the screen size is less than 900px and let’s also expand the width of the container little bit.


@media only screen and (max-width: 900px) {
  label span {
    display: none;
  }
  .tab_container {
    width: 98%;
  }
}

Animation:

We can make our content interactive, by adding kind of scale and fade animation. First we will create the animation


@keyframes fadeInScale {

  0% { 
  	transform: scale(0.9);
  	opacity: 0;
  }

  100% { 
  	transform: scale(1);
  	opacity: 1;
  }
  
}

Now we will apply it to paragraph and heading tag of the content.


.tab_container .tab-content p,
.tab_container .tab-content h3 {
  -webkit-animation: fadeInScale 0.7s ease-in-out;
  -moz-animation: fadeInScale 0.7s ease-in-out;
  animation: fadeInScale 0.7s ease-in-out;
}

demo download

  • shanza irfan

    you are amazing…..im just loving your work….im also learning web development…..i want to learn all these skills specially animations n popups…..you are very skillfull…(y)
    keep it up….:-)

  • Hi, gooooood work πŸ™‚
    But can you tell me, why in firefox the animation only works once clicking the tab?
    When clicking the same tab a second time, the content only “appears” – without any animation…
    I have the same problem on my website. Nearly all browsers are working well- it seems to be a firefox-problem. Is it possible to fix it?
    Thx
    endzeitH

  • Tasha

    Brilliant! Dare I say this works better than Chris Coyier’s version of CSS Tabs!

    I just wanted to ask, do you have any ideas when it comes to making the current tab (label) active?

    • Juergen

      @ Tasha

      #tab1:checked ~ #content1 will select the element with id=”content1″ in case element with id=”tab1″ is checked. In this case display is changed from none (see section {display: none;} to block (see #tab1:checked ~ #content1 {display: block;} and therefore tab contents content1 is revealed.

  • Juergen

    position: absolute; top:-9999; left:-9999; does not hide anything (radio buttons are positioned on top of the labels) but using position: absolute; top:-9999px; left:-9999px; will hide the radio buttons. The difference compared to hiding by display: none is, that it is still possible to focus/change by keyboard but of course the browser tries to move the radio button into the visible area meaning page will jump.

  • George Koutras

    Great article. One question however. I will need to have the menu fixed while scrolling. Any idea how to do this? Thank you for your help…