Puro CSS responsive horizontal acordeón

Vista prévia

Descripción

Un acordeón horizontal responsivo creado por < a href = "http:/michaelferry.com/" target = "_ blank" rel = "noopener" > ferry que hace uso de las transiciones CSS3 y se transforma para expandir suavemente los elementos del acordeón en el mouse Hover.

Funcionamiento

Construya la estructura HTML para el acordeón horizontal usando listas HTML.

<div class="accordion">

<ul>


<li>



<div> <a href="#">




<h2>Title 1</h2>




<p>Content 1</p>




</a> </div>


</li>


<li>



<div> <a href="#">




<h2>Title 2</h2>




<p>Content 2</p>




</a> </div>


</li>


<li>



<div> <a href="#">




<h2>Title 3</h2>




<p>Content 3</p>




</a> </div>


</li>


<li>



<div> <a href="#">




<h2>Title 4</h2>




<p>Content 4</p>




</a> </div>


</li>


<li>



<div> <a href="#">




<h2>Title 5</h2>




<p>Content 5</p>




</a> </div>


</li>


<li>



<div> <a href="#">




<h2>Title 6</h2>




<p>Content 6</p>




</a> </div>


</li>

</ul>
</div>

Los estilos CSS básicos para el acordeón.

.accordion {

width: 100%;

max-width: 1080px;

height: 250px;

overflow: hidden;

margin: 50px auto;
}

.accordion ul {

width: 100%;

display: table;

table-layout: fixed;

margin: 0;

padding: 0;
}

.accordion ul li {

display: table-cell;

vertical-align: bottom;

position: relative;

width: 16.666%;

height: 250px;

background-repeat: no-repeat;

background-position: center center;

transition: all 500ms ease;
}

.accordion ul li div {

display: block;

overflow: hidden;

width: 100%;
}

.accordion ul li div a {

display: block;

height: 250px;

width: 100%;

position: relative;

z-index: 3;

vertical-align: bottom;

padding: 15px 20px;

box-sizing: border-box;

color: #fff;

text-decoration: none;

font-family: Open Sans, sans-serif;

transition: all 200ms ease;
}

.accordion ul li div a * {

opacity: 0;

margin: 0;

width: 100%;

text-overflow: ellipsis;

position: relative;

z-index: 5;

white-space: nowrap;

overflow: hidden;

-webkit-transform: translateX(-20px);

transform: translateX(-20px);

-webkit-transition: all 400ms ease;

transition: all 400ms ease;
}

.accordion ul li div a h2 {

font-family: Montserrat, sans-serif;

text-overflow: clip;

font-size: 24px;

text-transform: uppercase;

margin-bottom: 2px;

top: 160px;
}

.accordion ul li div a p {

top: 160px;

font-size: 13.5px;
}

Añada imágenes de fondo a los elementos del acordeón.

.accordion ul li:nth-child(1) { background-image: url("1.jpg"); }

.accordion ul li:nth-child(2) { background-image: url("2.jpg"); }

.accordion ul li:nth-child(3) { background-image: url("3.jpg"); }

.accordion ul li:nth-child(4) { background-image: url("4.jpg"); }

.accordion ul li:nth-child(5) { background-image: url("5.jpg"); }

.accordion ul li:nth-child(6) { background-image: url("6.jpg"); }

Expanda el elemento de acordeón en el mouse Hover usando: hover pseudo elemento.

.accordion ul:hover li { width: 8%; }

.accordion ul:hover li:hover { width: 60%; }

.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }

.accordion ul:hover li:hover a * {

opacity: 1;

-webkit-transform: translateX(0);

transform: translateX(0);
}

Haga que el acordeón responda mediante consultas de medios CSS.

@media screen and (max-width: 600px) {

.accordion { height: auto; }

.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {

position: relative;

display: table;

table-layout: fixed;

width: 100%;

-webkit-transition: none;

transition: none;
}

}