Componente de pestañas animadas en CSS puro-Tabsy CSS

Vista prévia

Descripción

Un simple, animado, componente de pestañas responsive construido usando CSS/CSS3 y los trucos de radio + etiqueta. El componente de pestañas se desglosar automáticamente en una interfaz de acordeón vertical en dispositivos móviles para una mejor legibilidad.

Funcionamiento

Descargue e importe el ' tabsy. css ' en la página HTML.

<link href="tabsy.css" rel="stylesheet" type="text/css">

Cree la navegación de ficha para el contenido seccionado utilizando entradas de radio y elementos de etiqueta como estos:

<div class="tabsy">


<input type="radio" id="tab1" name="tab" checked>

<label class="tabButton" for="tab1">Tab One</label>



<div class="tab">


<div class="content">



Tab 1


</div>

</div>


<input type="radio" id="tab2" name="tab">

<label class="tabButton" for="tab2">Tab Two</label>



<div class="tab">


<div class="content">



Tab 2


</div>

</div>


<input type="radio" id="tab3" name="tab">

<label class="tabButton" for="tab3">Tab Three</label>



<div class="tab">


<div class="content">



Tab 3


</div>

</div>

</div>

Personaliza el componente de pestañas en el SASS:

// Base Colors
$tabActiveBgColor: #fff;
 $tabActiveTextColor: #5a5243;
$tabNectiveBgColor: #5a5243;
 $tabNectiveTextColor: #F5F5F5;

 // Breakpoint
$breakpoint: 768px;

// Transition
$transitionSpeed: 200ms;