Responsive CSS Tabs | Create Tab Using html css

Responsive CSS Tabs | Create Tab Using html css 

Responsive CSS Tabs | Create Tab Using html css


Welcome🎉 to Code With Random blog. In this blog, we learn how to create Responsive CSS Tabs. We use HTML & CSS  for Responsive CSS Tabs. Hope you enjoy our blog so let's start with a basic HTML structure for the Responsive CSS Tabs. 

HTML code

 <div class="oddbirds">  
  <input type="radio" name="toggle" id="mia-toggle" checked/>  
  <input type="radio" name="toggle" id="carl-toggle" />  
  <input type="radio" name="toggle" id="jonny-toggle" />  
  <div class="tabs">  
   <label for="mia-toggle">Mia</label>  
   <label for="carl-toggle">Carl</label>  
   <label for="jonny-toggle">Jonny</label>  
  </div>  
  <div class="content">  
   <div class="eric-content">  
    Responsive CSS Tabs in Sass,   
    with help from the float isolation method.  
    <ul>  
     <li>Container wraps all tabs dynamically</li>  
     <li>Container remains equal-height</li>  
     <li>No JS Height calculations</li>  
     <li>The entire thing is responsive</li>  
    </ul>   
   </div>  
   <div class="carl-content">  
    Carl is a coder, Pythonista, & Django developer.  
   </div>  
   <div class="jonny-content">  
    Jonny is a front-end developer & philosophy professor.  
    <ul>  
     <li>Lorem ipsum dolor sit amet.</li>  
     <li>Aliquam tincidunt mauris eu risus.</li>  
     <li>Vestibulum auctor dapibus neque.</li>  
     <li>Lorem ipsum dolor sit amet.</li>  
     <li>Aliquam tincidunt mauris eu risus.</li>  
     <li>Vestibulum auctor dapibus neque.</li>  
    </ul>   
   </div>  
  </div>  
 </div>  
There is all HTML code for the Responsive CSS Tabs. Now, you can see output without CSS, then we write CSS for the Responsive CSS Tabs.
Output
Responsive CSS Tabs | Create Tab Using html css

CSS code

 @import "compass/css3";  
 @import "compass";  
 /* Tab Settings */  
 $default-checked-selector : ':checked';  
 $default-nested-selectors : null;  
 $toggle-attribute  : id;  
 $title-attribute  : for;  
 $content-attribute : class;  
 /* Tab Toggle Defaults */  
 %gone {  
  position: absolute;  
  visibility: hidden;  
 }  
 %hide-tab-toggle { @extend %gone; }  
 /* Tab Content Defaults */  
 %hide-tab-content {  
  @include transition(opacity 300ms);  
  opacity: 0; /* Hide */  
  float: left; /* Isolation */  
  width: 100%; /* Isolation */  
  margin-right: -100%; /* Isolation */  
 }  
 %show-tab-content {  
  opacity: 1; /* Show */  
  position: relative; /* Bring to top */  
  z-index: 10; /* Bring to top */  
 }  
 %active-tab-title {  
  background: none;  
  border-bottom-color: rgba(black, 0);  
 }  
 /* Tabs Mixin */  
 @mixin tabs(  
  $slugs,  
  $nested: $default-nested-selectors,  
  $checked: $default-checked-selector  
 ) {  
  $nested-tabs: $nested;  
  $nested-content: $nested;  
  @if length($nested) > 1 {  
   $nested-tabs: nth($nested, 1);  
   $nested-content: nth($nested, 2);  
  }  
  @each $slug in $slugs {  
   $toggle  : '[#{$toggle-attribute}*="#{$slug}"]';  
   $title  : '[#{$title-attribute}*="#{$slug}"]';  
   $content : '[#{$content-attribute}*="#{$slug}"]';  
   #{$content} { @extend %hide-tab-content; }  
   #{$toggle} {  
    @extend %hide-tab-toggle;  
    &#{$checked} {  
     & ~ #{$nested-tabs} #{$title} {  
      @extend %active-tab-title !optional;  
     }  
     & ~ #{$nested-content} #{$content} {  
      @extend %show-tab-content;  
     }  
    }  
   }  
  }  
 }  
 /* Creating Tabs */  
 .oddbirds {  
  @include tabs(mia carl jonny, ".tabs" ".content");  
 }  
 /* Paint Job */  
 * { @include box-sizing(border-box); }  
 body {   
  @include adjust-leading-to(1.1);  
  padding: rhythm(1);  
  background: #437691;  
 }  
 .oddbirds {  
  @include box-shadow(rgba(black,.5) 0 0 .5em);  
  width: 80%;  
  max-width: 40em;  
  margin: 0 auto;  
  background: lightblue;  
 }  
 [for] {  
  @include rhythm-borders(1px,.25);  
  float: left;  
  width: percentage(1/3);  
  text-align: center;  
  background: #7ac;  
  ~ [for] { border-left: 0 }  
  &:last-child { float: right; }  
 }  
 .content {  
  @include clearfix;  
  @include rhythm-borders(1px,.5);  
  clear: both;  
  border-top: 0;  
  ul {   
   list-style: disc;   
   padding-left: rhythm(1);  
  }  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output

Responsive CSS Tabs | Create Tab Using html css

Responsive CSS Tabs | Create Tab Using html css

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Responsive CSS Tabs, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create Responsive CSS Tabs using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

code by - Miriam Suzanne

Check out more.....

Post a Comment

Previous Post Next Post