Bonito componente de pestañas limpias usando HTML puro/CSS

Vista prévia

Descripción

Sólo otra implementación pura de HTML/CSS de un buen componente de pestañas limpias con un indicador de pestaña actual animado.

Funcionamiento

Cree la navegación con pestañas utilizando listas HTML y entradas de radio de la siguiente manera:

<input type="radio" id="tab1" name="tab-control" checked>
<input type="radio" id="tab2" name="tab-control">
<input type="radio" id="tab3" name="tab-control">

<input type="radio" id="tab4" name="tab-control">
<ul>

<li title="tab 1"><label for="tab1" role="button"><span>Tab 1</span></label></li>

<li title="tab 2"><label for="tab2" role="button"><span>Tab 2</span></label></li>

<li title="tab 3"><label for="tab3" role="button"><span>Tab 3</span></label></li>

<li title="tab 4"><label for="tab4" role="button"><span>Tab 4</span></label></li>
</ul>

Cree el contenido con pestañas:

<div class="content">

<section>


<h2>Tab 1 content</h2>

</section>

<section>


<h2>Tab 2 content</h2>

</section>

<section>


<h2>Tab 3 content</h2>

</section>

<section>


<h2>Tab 4 content</h2>

</section>
</div>

Crea un indicador que se deslice automáticamente cuando cambias entre pestañas.

<div class="slider"><div class="indicator"></div></div>

Envuélvalo en un contenedor DIV con la clase CSS de ' tabs '.

<div class="tabs">
</div>

La magia CSS/CSS3 para activar el componente Tabs.

.tabs {

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

position: relative;

background: white;

padding: 50px;

padding-bottom: 80px;

width: 70%;

height: 250px;

box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);

border-radius: 5px;

min-width: 240px;
}

.tabs input[name="tab-control"] { display: none; }

.tabs .content section h2, .tabs ul li label {

font-weight: bold;

font-size: 18px;

color: #428BFF;
}

.tabs ul {

list-style-type: none;

padding-left: 0;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

margin-bottom: 10px;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

-webkit-box-align: end;

-webkit-align-items: flex-end;

-ms-flex-align: end;

align-items: flex-end;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;
}

.tabs ul li {

box-sizing: border-box;

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

width: 25%;

padding: 0 10px;

text-align: center;
}

.tabs ul li label {

-webkit-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

color: #929daf;

padding: 5px auto;

overflow: hidden;

text-overflow: ellipsis;

display: block;

cursor: pointer;

-webkit-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

white-space: nowrap;

-webkit-touch-callout: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;
}

.tabs ul li label br { display: none; }

.tabs ul li label svg {

fill: #929daf;

height: 1.2em;

vertical-align: bottom;

margin-right: 0.2em;

-webkit-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;
}

.tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {

outline: 0;

color: #bec5cf;
}

.tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg { fill: #bec5cf; }

.tabs .slider {

position: relative;

width: 25%;

-webkit-transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);

transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}

.tabs .slider .indicator {

position: relative;

width: 50px;

max-width: 100%;

margin: 0 auto;

height: 4px;

background: #428BFF;

border-radius: 1px;
}

.tabs .content { margin-top: 30px; }

.tabs .content section {

display: none;

-webkit-animation-name: content;

animation-name: content;

-webkit-animation-direction: normal;

animation-direction: normal;

-webkit-animation-duration: 0.3s;

animation-duration: 0.3s;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: 1;

animation-iteration-count: 1;

line-height: 1.4;
}

.tabs .content section h2 {

color: #428BFF;

display: none;
}

.tabs .content section h2::after {

content: "";

position: relative;

display: block;

width: 30px;

height: 3px;

background: #428BFF;

margin-top: 5px;

left: 1px;
}

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {

cursor: default;

color: #428BFF;
}

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg { fill: #428BFF; }
@media (max-width: 600px) {

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label { background: rgba(0, 0, 0, 0.08); }
}

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {

-webkit-transform: translateX(0%);

transform: translateX(0%);
}

.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) { display: block; }

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {

cursor: default;

color: #428BFF;
}

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg { fill: #428BFF; }
@media (max-width: 600px) {

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label { background: rgba(0, 0, 0, 0.08); }
}

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider {

-webkit-transform: translateX(100%);

transform: translateX(100%);
}

.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) { display: block; }

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {

cursor: default;

color: #428BFF;
}

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg { fill: #428BFF; }
@media (max-width: 600px) {

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label { background: rgba(0, 0, 0, 0.08); }
}

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider {

-webkit-transform: translateX(200%);

transform: translateX(200%);
}

.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) { display: block; }

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {

cursor: default;

color: #428BFF;
}

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg { fill: #428BFF; }
@media (max-width: 600px) {

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label { background: rgba(0, 0, 0, 0.08); }
}

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider {

-webkit-transform: translateX(300%);

transform: translateX(300%);
}

.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) { display: block; }
@-webkit-keyframes
 content {
from {
 opacity: 0;
 -webkit-transform: translateY(5%);
 transform: translateY(5%);
}

to {

opacity: 1;

-webkit-transform: translateY(0%);

transform: translateY(0%);
}
}
@keyframes
 content {
from {
 opacity: 0;
 -webkit-transform: translateY(5%);
 transform: translateY(5%);
}

to {

opacity: 1;

-webkit-transform: translateY(0%);

transform: translateY(0%);
}
}
@media (max-width: 1000px) {

.tabs ul li label { white-space: initial; }

.tabs ul li label br { display: initial; }

.tabs ul li label svg { height: 1.5em; }
}
@media (max-width: 600px) {

.tabs ul li label {

padding: 5px;

border-radius: 5px;
}

.tabs ul li label span { display: none; }

.tabs .slider { display: none; }

.tabs .content { margin-top: 20px; }

.tabs .content section h2 { display: block; }
}