Simple CSS Tabs without Javascript

Simple CSS Tabs without Javascript

In this tutorial, I am going to create another set of simple CSS tabs without Javascript. In our previous article, We have did a experiement with tabs but here I will take a look in different way.

I will also use a different technique to create tabs in this article. Not only this but also the design will be changed, and the animations will be entirely different in this tutorial.

One of the better ways to arrange a respectable amount of content on a site page is to apply tabs. A couple of situations you might find this system uses a lot.

For example, online stores often organize the product description, delivery information and return policy content using horizontal tabs below the product price.

The usage of the tabbed area is very regular more recently. Few websites have their complete layout predicated on tabbed area concept.

In this article, we will look at types of tabbed using CSS and HTML only. Among the method making tab will demand little Javascript for better user experience but will continue to work fine without Javascript.

There are many choices available on the web about how to set-up simple navigation tabs. A great deal of these options though uses JavaScript (usually jQuery).

While this must not be a problem whatsoever, in this specific article, I’d like to share one particular method of earning tabs which written in few lines of CSS.

Simple HTML Markup

As you can see in below HTML snippet, we are using simple input radio buttons fields and labels for every tab title. Then we are adding the content for every tab in a separate div class name tab__content. Each input radio button has a unique ID, so we can then style it through the CSS.

<div class="tab-wrap">
    <input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
    <label for="tab1">Short</label>
    
    <input type="radio" id="tab2" name="tabGroup1" class="tab">
    <label for="tab2">Medium</label>
    
    <input type="radio" id="tab3" name="tabGroup1" class="tab">
    <label for="tab3">Long</label>
    
    <div class="tab__content">
        TAB ONE CONTENT
    </div>
    <div class="tab__content">
      TAB Two CONTENT
    </div>
    <div class="tab__content">
      TAB THREE CONTENT
    </div>
</div>

Styling without Javascript

We added some nice transition, box-shadow and another general style to the wrapper of the tabs.

.tab-wrap {
  -webkit-transition: 0.3s box-shadow ease;
  transition: 0.3s box-shadow ease;
  border-radius: 6px;
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  list-style: none;
  background-color: #fff;
  margin: 40px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

Each tab will be handled through use of : checked and :nth-of-type CSS3 property.

.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
  opacity: 1;
  -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
  position: relative;
  top: 0;
  z-index: 100;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  text-shadow: 0 0 0;
}

We will style the label, so it looks nice in design and also adds the transition.

.tab + label {
  box-shadow: 0 -1px 0 #eee inset;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #333;
  -webkit-box-flex: 3;
      -ms-flex-positive: 3;
          flex-grow: 3;
  text-align: center;
  background-color: #f2f2f2;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
  transition: 0.3s background-color ease, 0.3s box-shadow ease;
  height: 50px;
  box-sizing: border-box;
  padding: 15px;
}

Finally, we need to design the content area of a tab. We will add some padding, background color but the most necessary to add the position to absolute.

.tab__content {
  padding: 10px 25px;
  background-color: transparent;
  position: absolute;
  width: 100%;
  z-index: -1;
  opacity: 0;
  left: 0;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  border-radius: 6px;
}

Code ExamplesYou May Also Like