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>
Output
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
Post a Comment