Creación de un elegante menú de acordeón con CSS puro

Vista prévia

Descripción

En este post vamos a crear un menú de acordeón con estilo que le permite alternar los paneles ocultos haciendo clic en la barra de título.

Funcionamiento

Estructura HTML de marcado.

<div class="togglebox">

<div>


<input id="radio1" type="radio" name="toggle" checked="checked"/>


<label for="radio1">Title 1</label>


<div class="content">



<p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>



<p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>


</div>

</div>

<div>


<input id="radio2" type="radio" name="toggle"/>


<label for="radio2">Title 2</label>


<div class="content">



<p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>



<p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>


</div>

</div>

<div>


<input id="radio3" type="radio" name="toggle"/>


<label for="radio3">Title 3</label>


<div class="content">



<p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>



<p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>


</div>

</div>

<div>


<input id="radio4" type="radio" name="toggle"/>


<label for="radio4">Title 4</label>


<div class="content">



<p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>



<p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>


</div>

</div>

<div>


<input id="radio5" type="radio" name="toggle"/>


<label for="radio5">Title 5</label>


<div class="content">



<p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>



<p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>


</div>

</div>
</div>

El CSS/CSS3. Font awesome 4 es necesario para alternar flechas.

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

:before,
:after {
 content: '';
 display: block;
 position: absolute;
 box-sizing: border-box;
}

html,
body {
 height: 100%;
 font: 16px/1 'Open Sans', sans-serif;
 color: #555;
 background: #4a6a8a;
}

body {
 padding: 50px;
}

.togglebox {
 width: 300px;
 height: 400px;
 margin: 0 auto;
 background: #3c566f;
}

input[type="radio"] {
 position: absolute;
 opacity: 0;
}

label {
 position: relative;
 display: block;
 height: 50px;
 line-height: 50px;
 padding: 0 20px;
 font-size: 14px;
 font-weight: bold;
 color: rgba(255, 255, 255, 0.5);
 background: #2e4155;
 cursor: pointer;
}

label:hover {
 background: #1f2d3a;
}

label:after {
 content: '\f078';
 top: 0px;
 right: 20px;
 font-family: fontawesome;
}

.content {
 height: 0;
 overflow: hidden;
}

input[type="radio"]:checked ~ label {
 color: rgba(255, 255, 255, 0.8);
}

input[type="radio"]:checked ~ label:after {
 transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
}

input[type="radio"]:checked ~ .content {
 height: 150px;
}

p {
 margin: 15px 0;
 padding: 0 20px;
 font-size: 11px;
 line-height: 1.5;
 color: rgba(255, 255, 255, 0.8);
}