Menú de acordeón simple con transiciones CSS3

Vista prévia

Descripción

Un sencillo menú de navegación de acordeón construido solo con CSS y animado por transiciones CSS3.

Funcionamiento

Compile la estructura para un menú de acordeón utilizando listas HTML anidadas no ordenadas.

<nav id="menu_box">

<ul class="menu">


<li> <a href="#">Menu 1</a>



<ul>




<li><a href="#">Menu 1.1</a></li>




<li><a href="#">Menu 1.2</a></li>



</ul>


</li>


<li> <a href="#">Menu 2</a>



<ul>




<li><a href="#">Menu 2.1</a></li>




<li><a href="#">Menu 2.2</a></li>




<li><a href="#">Menu 2.3</a></li>



</ul>


</li>


<li> <a href="#">Menu 3</a>



<ul>




<li><a href="#">Menu 3.1</a></li>




<li><a href="#">Menu 3.2</a></li>




<li><a href="#">Menu 3.3</a></li>




<li><a href="#">Menu 3.4</a></li>



</ul>


</li>


<li> <a href="#">Menu 4</a> </li>

</ul>
</nav>

Los estilos CSS requeridos para el menú de acordeón.

.menu {

margin: 0 auto;

padding: 0;

width: 350px;
}

.menu li { list-style: none; }

.menu li a {

display: table;

margin-top: 1px;

padding: 14px 10px;

width: 100%;

background: #337D88;

text-decoration: none;

text-align: left;

vertical-align: middle;

color: #fff;

overflow: hidden;

-webkit-transition-property: background;

-webkit-transition-duration: 0.4s;

-webkit-transition-timing-function: ease-out;

transition-property: background;

transition-duration: 0.4s;

transition-timing-function: ease-out;
}

.menu > li:first-child a { margin-top: 0; }

.menu li a:hover {

background: #4AADBB;

-webkit-transition-property: background;

-webkit-transition-duration: 0.2s;

-webkit-transition-timing-function: ease-out;

transition-property: background;

transition-duration: 0.2s;

transition-timing-function: ease-out;
}

.menu li ul {

margin: 0;

padding: 0;
}

.menu li li a {

display: block;

margin-top: 0;

padding: 0 10px;

height: 0;

background: #C6DDD9;

color: #1F3D39;

-webkit-transition-property: all;

-webkit-transition-duration: 0.5s;

-webkit-transition-timing-function: ease-out;

transition-property: all;

transition-duration: 0.5s;

transition-timing-function: ease-out;
}

.menu > li:hover li a {

display: table;

margin-top: 1px;

padding: 10px;

width: 100%;

height: 1em;

-webkit-transition-property: all;

-webkit-transition-duration: 0.3s;

-webkit-transition-timing-function: ease-out;

transition-property: all;

transition-duration: 0.3s;

transition-timing-function: ease-out;
}

.menu > li:hover li a:hover {

background: #A4CAC8;

-webkit-transition-property: background;

-webkit-transition-duration: 0.2s;

-webkit-transition-timing-function: ease-out;

transition-property: background;

transition-duration: 0.2s;

transition-timing-function: ease-out;
}