Foros del Web » Creando para Internet » CSS »

Submenú despliegue lento con css3

 Estas en el tema de Submenú despliegue lento con css3 en el foro de CSS en Foros del Web. Hola amig@s! Tengo un menú con submenús, resulta que quiero hacer que cuando se esté por desplegar el submenú lo haga de una forma lenta, ...
  #1 (permalink)  
Antiguo 05/03/2012, 14:02
Avatar de novatoide  
Fecha de Ingreso: abril-2011
Mensajes: 171
Antigüedad: 13 años, 7 meses
Puntos: 13
Submenú despliegue lento con css3
Hola amig@s!

Tengo un menú con submenús, resulta que quiero hacer que cuando se esté por desplegar el submenú lo haga de una forma lenta, no así de repente, que se valla desplegando lento, ¿se entiende?, alguna idea

Abrazo.-
  #2 (permalink)  
Antiguo 05/03/2012, 14:18
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 13 años, 3 meses
Puntos: 20
Respuesta: Submenú despliegue lento con css3
Si lo que deseas es que el submenú aparezca de una altura menor a una altura mayor con una transición (para dar el efecto de abrir), entonces deberías tener una altura inicial para el submenú a partir de donde comenzará la transición y luego entonces una altura final que vendrá dada por el submenú con la pseudoclase :hover. De esta forma ya tienes el efecto de desplegar, ahora para hacer la transición tendrás que ponerle al :hover además de sus parámetros ya especificados una propiedad de transición:
que sería de esta forma:

Código CSS: 
Ver original
  1. -moz-transition:0.1s;
  2.     -ms-transition:0.1s;
  3.     -o-transition:0.1s;
  4.     -webkit-transition:0.1s;
  5.     transition:0.1s;

El tiempo está dado en segundos y será el tiempo total que durará la transición desde el momento en que el botón esté hover hasta el tamaño final.

Si deseas que cuando se quite el puntero el menú se esconda de la misma forma, tendrías que poner esas mismas propiedades pero

Para más efectos, podrías consultar CSS transitions.
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #3 (permalink)  
Antiguo 05/03/2012, 14:33
Avatar de novatoide  
Fecha de Ingreso: abril-2011
Mensajes: 171
Antigüedad: 13 años, 7 meses
Puntos: 13
Respuesta: Submenú despliegue lento con css3
Si, logre hacer el efecto que quiero con el transition, pero el problema es cuando me posiciono en el menú desplegable aparece de repente y mi idea es que tenga un efecto transición también pero no funciona mira:

LINK

Abrazo:.-
  #4 (permalink)  
Antiguo 05/03/2012, 15:01
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 13 años, 3 meses
Puntos: 20
Respuesta: Submenú despliegue lento con css3
Dime si este es el efecto que deseas.

Código HTML: 
Ver original
  1. <html lang="es">
  2. <head>
  3.     <meta charset="utf8" />
  4.     <title>Mi web</title>
  5.     <style type="text/css">
  6.     <!--
  7. * {padding:0; margin:0; border:0;}
  8. //p
  9. {
  10.     padding: 5px 250px;
  11.     margin: 10px;
  12.     background: #ff0030;
  13.     color: #fff;
  14.     font-size: 15px;
  15.     line-height: 1.3em;
  16.     border: 2px dashed #fff;
  17.     border-radius: 3px;
  18.     -moz-border-radius: 3px;
  19.     -webkit-border-radius: 3px;
  20.     -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  21.     -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  22.     box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
  23.     text-shadow: -1px -1px #aa3030;
  24. }
  25. #contenedor
  26. {
  27.     overflow:hidden;
  28.     margin:10px auto 0px;
  29.     width:900px;
  30.     background:pink;
  31. }
  32.  
  33. .menu li 
  34. {
  35.     margin:10px;
  36.     float:left;
  37.     padding:10px;
  38.     display:block;
  39.     background:black;
  40.     width:200px;
  41. }
  42. .menu
  43. {
  44.     height:100px;
  45. }
  46. .menu li:hover
  47. {
  48.     background:red;
  49.         -moz-transition: background 0.6s;
  50.         -moz-transition: background 0.6s;
  51.         -ms-transition: background 0.6s;
  52.         -o-transition: background 0.6s;
  53.         -webkit-transition: background 0.6s;
  54.         transition: background 0.6s;
  55. }
  56. .menu ul li ul
  57. {
  58.     /*display:none; /*Oculta submenu*/
  59.     //background:#cac99e;
  60.     position:absolute;
  61.     //padding:5px;
  62.     margin:10px -20px; /*Pocicion*/
  63.     .margin:69px -170px; /* hack pa ir */
  64.     _margin:69px -170px;
  65.     height:0px;
  66.     visibility: hidden;
  67. }
  68.  
  69. .menu ul li:hover ul
  70. {   
  71.     /*display:block;*/
  72.     height:250px;
  73.     visibility: visible;
  74.     overflow: hidden;
  75.     color:red;
  76.     -moz-transition: 0.4s;
  77.     -ms-transition: 0.5s;
  78.     -o-transition: 0.5s;
  79.     -webkit-transition: 0.5s;
  80.     transition:0.5s;
  81. }
  82. .menu ul li ul li
  83. {
  84.     margin:0px;
  85.     left:10px;
  86.     display:block;
  87.     float:none;
  88.     position:relative;
  89.     color:#fff;
  90.     //padding:0px;
  91.     line-height:30px;
  92.     background-color:black;
  93.  
  94. }
  95. .menu ul li ul li:hover
  96. {   
  97.     background-color:red;
  98.     -moz-transition: 0.4s;
  99.     -ms-transition: 0.5s;
  100.     -o-transition: 0.5s;
  101.     -webkit-transition: 0.5s;
  102.     transition:0.5s;
  103. }
  104.  
  105. .menu a
  106. {
  107.     text-decoration:none;
  108. }
  109.  
  110.  
  111. -->
  112.     </style>
  113. </head>
  114. <body>
  115.  
  116. <div id="banner">s</div>
  117. <div id="contenedor">
  118.  
  119.     <div class="menu">
  120.             <ul>
  121.                 <a href="#">
  122.                 <li>Sobre...</li></a>
  123.                 <li>Navegarsdfsadf
  124.                     <ul>
  125.                         <a href="#"><li>LINK DINAMICOS</li></a>
  126.                         <a href="#"><li>LINK DINAMICOS</li></a>
  127.                         <a href="#"><li>LINK DINAMICOS</li></a>
  128.                         <a href="#"><li>LINK DINAMICOS</li></a>
  129.                         <a href="#"><li>LINK DINAMICOS</li></a>
  130.                     </ul>
  131.                 </li>
  132.             </ul>
  133.             <ul>
  134.                 <li><a href="#">Contacto</a></li>
  135.             </ul>
  136.     </div>
  137.  
  138.     <div id="contenido"> <!-- CONTENIDO -->
  139.         <p>HOla</p>
  140.  
  141.     </div> <!-- END CONTENIDO -->
  142.  
  143. </div> <!-- END CONTENEDOR -->
  144.  
  145. </body>
  146. </html>
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #5 (permalink)  
Antiguo 05/03/2012, 15:07
Avatar de novatoide  
Fecha de Ingreso: abril-2011
Mensajes: 171
Antigüedad: 13 años, 7 meses
Puntos: 13
De acuerdo Respuesta: Submenú despliegue lento con css3
Cita:
Iniciado por xFantaSx Ver Mensaje
Dime si este es el efecto que deseas.

Código HTML: 
Ver original
  1. <html lang="es">
  2. <head>
  3.     <meta charset="utf8" />
  4.     <title>Mi web</title>
  5.     <style type="text/css">
  6.     <!--
  7. * {padding:0; margin:0; border:0;}
  8. //p
  9. {
  10.     padding: 5px 250px;
  11.     margin: 10px;
  12.     background: #ff0030;
  13.     color: #fff;
  14.     font-size: 15px;
  15.     line-height: 1.3em;
  16.     border: 2px dashed #fff;
  17.     border-radius: 3px;
  18.     -moz-border-radius: 3px;
  19.     -webkit-border-radius: 3px;
  20.     -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  21.     -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  22.     box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
  23.     text-shadow: -1px -1px #aa3030;
  24. }
  25. #contenedor
  26. {
  27.     overflow:hidden;
  28.     margin:10px auto 0px;
  29.     width:900px;
  30.     background:pink;
  31. }
  32.  
  33. .menu li 
  34. {
  35.     margin:10px;
  36.     float:left;
  37.     padding:10px;
  38.     display:block;
  39.     background:black;
  40.     width:200px;
  41. }
  42. .menu
  43. {
  44.     height:100px;
  45. }
  46. .menu li:hover
  47. {
  48.     background:red;
  49.         -moz-transition: background 0.6s;
  50.         -moz-transition: background 0.6s;
  51.         -ms-transition: background 0.6s;
  52.         -o-transition: background 0.6s;
  53.         -webkit-transition: background 0.6s;
  54.         transition: background 0.6s;
  55. }
  56. .menu ul li ul
  57. {
  58.     /*display:none; /*Oculta submenu*/
  59.     //background:#cac99e;
  60.     position:absolute;
  61.     //padding:5px;
  62.     margin:10px -20px; /*Pocicion*/
  63.     .margin:69px -170px; /* hack pa ir */
  64.     _margin:69px -170px;
  65.     height:0px;
  66.     visibility: hidden;
  67. }
  68.  
  69. .menu ul li:hover ul
  70. {   
  71.     /*display:block;*/
  72.     height:250px;
  73.     visibility: visible;
  74.     overflow: hidden;
  75.     color:red;
  76.     -moz-transition: 0.4s;
  77.     -ms-transition: 0.5s;
  78.     -o-transition: 0.5s;
  79.     -webkit-transition: 0.5s;
  80.     transition:0.5s;
  81. }
  82. .menu ul li ul li
  83. {
  84.     margin:0px;
  85.     left:10px;
  86.     display:block;
  87.     float:none;
  88.     position:relative;
  89.     color:#fff;
  90.     //padding:0px;
  91.     line-height:30px;
  92.     background-color:black;
  93.  
  94. }
  95. .menu ul li ul li:hover
  96. {   
  97.     background-color:red;
  98.     -moz-transition: 0.4s;
  99.     -ms-transition: 0.5s;
  100.     -o-transition: 0.5s;
  101.     -webkit-transition: 0.5s;
  102.     transition:0.5s;
  103. }
  104.  
  105. .menu a
  106. {
  107.     text-decoration:none;
  108. }
  109.  
  110.  
  111. -->
  112.     </style>
  113. </head>
  114. <body>
  115.  
  116. <div id="banner">s</div>
  117. <div id="contenedor">
  118.  
  119.     <div class="menu">
  120.             <ul>
  121.                 <a href="#">
  122.                 <li>Sobre...</li></a>
  123.                 <li>Navegarsdfsadf
  124.                     <ul>
  125.                         <a href="#"><li>LINK DINAMICOS</li></a>
  126.                         <a href="#"><li>LINK DINAMICOS</li></a>
  127.                         <a href="#"><li>LINK DINAMICOS</li></a>
  128.                         <a href="#"><li>LINK DINAMICOS</li></a>
  129.                         <a href="#"><li>LINK DINAMICOS</li></a>
  130.                     </ul>
  131.                 </li>
  132.             </ul>
  133.             <ul>
  134.                 <li><a href="#">Contacto</a></li>
  135.             </ul>
  136.     </div>
  137.  
  138.     <div id="contenido"> <!-- CONTENIDO -->
  139.         <p>HOla</p>
  140.  
  141.     </div> <!-- END CONTENIDO -->
  142.  
  143. </div> <!-- END CONTENEDOR -->
  144.  
  145. </body>
  146. </html>
Si eso mismo bnusco bro!!! eres un genio! si me podrias explicar lo que hicistes te lo agradeceria un monton :D

Se que el carma no vale nada pero si pudiera te daria una abrazo de oso jajaja xD

Abrazo.-
  #6 (permalink)  
Antiguo 05/03/2012, 15:23
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 13 años, 3 meses
Puntos: 20
Respuesta: Submenú despliegue lento con css3
Pues todo está explicado en el primer mensaje que te dejé.
Inicialmente lo que tenías mal era que en tu transición estaba algo así:
Código CSS: 
Ver original
  1. -moz-transition: height 0.6s ease-in-out, background-color 0.6s;
En ese caso sólo servía para un navegador, por esta razón debes activar el mismo efecto para cada navegador con las siguientes propiedades...
Código CSS: 
Ver original
  1. -moz-transition:0.1s;
  2.     -ms-transition:0.1s;
  3.     -o-transition:0.1s;
  4.     -webkit-transition:0.1s;
  5.     transition:0.1s;

Igualmente esta regla, como la tenías, sólo iba a modificar el height, y como ves esta propiedad no está establecida en la regla:

Código CSS: 
Ver original
  1. .menu li:hover
  2. {
  3.     background:red;
  4.     -moz-transition: height 0.6s ease-in-out, background-color 0.6s;
  5. }

En el caso de la transición de los colores era el mismo error.

Ahora para hacer el efecto de desplegar el menú como te dije, primero hay que especificar un alto al menú, en este caso lo apliqué a la regla: ".menu ul li ul" con un height:0px y visibility: hidden;.
luego la regla que lo hace visible es esta: ".menu ul li:hover ul", para esta el efecto de aparecer se hace con visibility: visible; y ahora va a tener una altura de 250px, o sea height:250px; y por último un overflow:hidden para que el contenido no se salga y la lista lo haga visible a medida que va apareciendo el menú, por último haces la transición:
Código CSS: 
Ver original
  1. -moz-transition: 0.4s;
  2.     -ms-transition: 0.5s;
  3.     -o-transition: 0.5s;
  4.     -webkit-transition: 0.5s;
  5.     transition:0.5s;

Eso es todo.

Creo que además tenías una etiqueta ul sin cerrar, y otro error es que la etiqueta li debe contener los links y no los links a la etiqueta li.
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #7 (permalink)  
Antiguo 05/03/2012, 15:32
Avatar de novatoide  
Fecha de Ingreso: abril-2011
Mensajes: 171
Antigüedad: 13 años, 7 meses
Puntos: 13
Respuesta: Submenú despliegue lento con css3
Sisis bro leí todo y lo entendí el código, no lograba darme cuenta lo del efecto, también sabía que está mal puesto el transition lo que pasa que lo arregle y no lo subí arreglado , no conocía la propiedad visibility + eso y el overflow está el efecto que estaba buscando :P eres un genio!

por el tema del <ul> mal cerrado, esta así porque en realidad contiene otro enlace, como el ultimo </li> cierra el sub menú no sabía cómo poner el botón de contactó en el último lugar, entonces opte por esa solución rápida que no me dio ningún problema . Por qué los link dinámicos eso ya va hacer parte de la programación del blog en phpoo que le estoy por realizar.

Jaja y los enlaces al revés del <li></li> lo puse así porque mi idea era que al tocar todo el botón se ingrese al hipervínculo y no tocando el texto solo xD
Abrazo.-
  #8 (permalink)  
Antiguo 05/03/2012, 15:40
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 13 años, 3 meses
Puntos: 20
Respuesta: Submenú despliegue lento con css3
Cita:
Iniciado por novatoide Ver Mensaje
Jaja y los enlaces al revés del <li></li> lo puse así porque mi idea era que al tocar todo el botón se ingrese al hipervínculo y no tocando el texto solo xD
Abrazo.-
En ese caso, para no hacer las cosas al revés...
simplemente deberías ponerle a los enlaces un display:block, para que de esta forma tomen todo el ancho del elemento de la lísta, ahora para que estos enlaces tomen el alto total de la lista sólo basta con poner un line-height: "altura del elemento", de esta forma quedará como es debido y tendrá el efecto necesario.
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #9 (permalink)  
Antiguo 05/03/2012, 18:24
Avatar de novatoide  
Fecha de Ingreso: abril-2011
Mensajes: 171
Antigüedad: 13 años, 7 meses
Puntos: 13
De acuerdo Respuesta: Submenú despliegue lento con css3
GENIOOOOOOOOOOOOOO!!!! ahora quedo como tiene que quedar y en regla :P la parte del menú :D

Gracias broo!!! +1

Etiquetas: css3, despliegue, lento
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:10.