JMiur [E]

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:
<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>

17 comentarios:

Graciela  

Se puede usar para el archivo del blog, los sitios que visitás...ahhh qué bello queda :)

Responder
Gem@  

Tiene un efecto muy elegante... lo dicho, las transiciones sirven para cualquier cosa, están de moda :)

Responder
deathdan93  

Bonito efecto :D y solo se usa un poco de CSS

Responder
Beben Koben  

WOW :O ...
really can be reality with CSS3...
awesome :)

Responder
Txolarte  

Hola Miur:
Me parece muy vistosa y sencilla tu explicación
He probado tanto uno como otro, pero en el menú horizontal, no veo los ítems 12-13 y 22-23.
blog de prueba

Gracias y enhorabuena por tu trabajo

Responder
JMiur  

Txolarte:
Como estás usando esas neuvas plantillas de Blogger y estan llenas de propiedades por defecto, agrega esto:

#demomenu {
margin: 0 !important;
padding: 0 0 !important;
}

Luego, cuando lo escribes en un post como en tu ejemplo, se generan saltos de línea automáticos. Puedes elimianrlos manualmente o bien agregar esto y con eso los ocultas en el menú:

#demomenu br {display: none;}

De esa manera, los verás uno al lado del otro ya que ahora se meustran uno debajo del otro y por eso no los ves.

Responder
Txolarte  

Gracias Miur.
Como mejor me funciona, es eliminando los saltos de línea, de forma manual.
Como soy bastante primitivo con el código, he tenido que dar bastantes vueltas para ajustar el “Padding” con los enlaces ocultos ,pero las orientaciones que pones en el código me han facilitado el trabajo.
Un saludo

Responder
JMiur  

Perfecto, Txolarte :D

Responder
luisal2908  

Bonito efecto sin javascript,¿funciona también con IE? no conocía estos atributos de transition en css.
Gracias por el aporte. Luis - <a href="http://ofertacarro.com/>Carros en venta</a>

Responder
JMiur  

Las transisiones no funcionan en IE.

Responder
jjop_215  

me gusto el efecto... una de mis paginas favoritas, lo unico es que en la forma vertical no me aparecer los links con los recuadros, y me aparece como aparecen los items en los menus horizontales...

Responder
JMiur  

Tendrías que mostrarme un ejemplo para ver si hay un error o cómo corregirlo.

Responder
jjop_215  

hola, pues mi pagina donde lo implemente es http://proyectoswebgt.com espero me ayudes

Responder
JMiur  

Es poruqe los enlaces no se encuentran dentro de una etiquwta LI

<li> <a href="xxxxxxxx"> xxxxxxxxxxx </a> </li>

Responder
jjop_215  

gracias mi estimado por la ayuda!

Responder
El Chueco  

Que tal me gusto mucho este menu pero no me sale o tuve algún error por ahí. Trate de hacer el segundo ejemplo :((
http://anispruebas.blogspot.com/2011/07/menu.html
Aquí es donde coloque el ejemplo.
Me podrías ayudar a solucionar este error;
Muchas gracias y saludos.

Responder
JMiur  

No veo ningún problema en tu ejemplo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR