Si digo que las transiciones sirven para cualquier cosa, es una exageración pero ... sirven para casi cualquier cosa. Esta vez, veamos cómo podrían aplicarse a la creación de menús expandibles.
Creo el HTML que es un rectángulo en donde colocamos una lista ordenada cuya clase es visible y dentro de esta, una segunda lista cuya clase es novisible:
Creo el HTML que es un rectángulo en donde colocamos una lista ordenada cuya clase es visible y dentro de esta, una segunda lista cuya clase es novisible:
<div id="demomenu">
<ul class="visible">
<li>mi menú <ul class="novisible">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
</ul>
</ul>
</div>
Y el CSS:
<style>
/* las reglas generales */
#demomenu { /* este es el rectángulo que contendrá todo */
margin: 0 auto 50px;
position: relative; /* lo posicionamos de manera relativa */
width: 200px; /* definimos su ancho */
z-index: 100; /* hacemos que quede por encima de las demás etiquetas */
}
#demomenu ul { /* reseteamos las lista quitándoles posibles propeidades */
list-style-type: none;
margin: 0;
padding: 0;
}
#demomenu li { list-style-type: none; }
#demomenu a { /* establecemos las propiedades de los textos delos enlaces */
color: #456;
font-size: 17px;
text-decoration: none;
text-shadow: 1px 1px 1px #FFF;
}
#demomenu a:hover { color: #000; }
/* esta es la lista visible */
#demomenu .visible {
background-color: #456;
border: 2px solid #ABC;
border-radius: 4px;
box-shadow: 0 0 5px #FFF inset;
cursor: pointer;
padding: 5px 0;
text-align: center;
/* estas son las propiedades importantes */
display: block;
position: absolute;
width: 200px;
}
#demomenu ul.visible li { /* el primer item no es un enlace así que definimos sus propeidades */
color: #EEEEEE;
font-family: Tahoma;
font-size: 24px;
text-shadow: 1px 1px 1px #000;
}
/* cada item que permanece oculto */
#demomenu ul.visible ul li {
background-color: #ABC;
border-top: 2px solid #456;
padding: 0 0 5px;
/* esta transición afectará al color de fondo de cada item */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
/* la lista oculta */
#demomenu .novisible {
display: block;
padding: 0 10px;
position: relative;
top: 10px;
/* con esto la mantenemos oculta */
height: 0;
overflow: hidden;
/* la transición hará que se anime el cambio de altura */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
/* cambia el color de fondo */
#demomenu ul.visible ul li:hover { background-color: #CDE; }
/* cambia la altura y por lo tanto, se hace visible */
#demomenu ul.visible:hover .novisible { height: 200px; }
</style>
Otra variante. En lugar de desplegar algo verticalmente, lo desplegaremos horizontalmente o mejor dicho, ampliaremos su ancho para dejar visible lo que está debajo; el HTML es otra lista:
<ul id="demomenu">
<li>item 1
<div>
<a href="#">item 11</a>
<a href="#">item 12</a>
<a href="#">item 13</a>
</div>
</li>
<li>item 2
<div>
<a href="#">item 21</a>
<a href="#">item 22</a>
<a href="#">item 23</a>
</div>
</li>
<-- seguimos agregando -->
</ul>
Y el CSS cásico del ejemplo:
<style>
#demomenu { /* reseteamos la lista quitándole posibles propeidades */
list-style-type: none;
margin: 0;
padding: 0;
}
#demomenu li { /* cada item de la lista */
background-color: #456;
border: 2px solid #ABC;
box-shadow: 0 0 5px #FFFF inset;
border-radius: 0 10px 10px 0;
color: #EEE;
font-family: Tahoma;
font-size: 24px;
height: 32px;
line-height: 32px;
list-style-type: none;
margin: 2px 0;
position:relative;
width: 100px;
text-shadow: 1px 1px 1px #000;
/* esta es la propiedad que se animará */
padding-left: 10px;
/* la transición */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#demomenu li div { /* los enlaces interiores permanece ocultos */
left: 10px;
position: absolute;
top: -3px;
width: 200px;
/* esta es la propiedad que se animará */
opacity: 0;
/* la transición */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
/* al poner el cursor encima, aumentamos el padding mostrando lo que hay debajo */
#demomenu li:hover { padding-left: 300px; }
#demomenu li:hover div { opacity: 1; }
#demomenu li div a { /* las propeidades de los enlaces ocultos */
color: #000;
font-size: 14px;
margin: 0 5px;
text-shadow: 1px 0 1px #FFF;
}
#demomenu li div a:hover {
color: #FFF;
text-shadow: 1px 0 1px #000;
}
</style>
No hay comentarios:
Publicar un comentario