CSS - Transición suave entre opciones de menu

Transición suave entre opciones de menu

Publicado por Juan (11 intervenciones) el 25/05/2016 18:29:27

Estimados, ¿cómo puedo lograr una transición más suave al dar click en las opciones del menú?

Si se fijan en mi web, el cambio al dar clik entre una opción y otra del menú se da de forma abrupta.

¿Es posible que se de el efecto de desplazamiento suave del color rosa al dar click entre una opción y la otra?

Muy amables por la ayuda que puedan brindarme.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 624

Transición suave entre opciones de menu

Publicado por xve (490 intervenciones) el 25/05/2016 23:11:59

Hola Juan, he entrado en tu pagina, y no veo ningún menú¿?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Transición suave entre opciones de menu

Publicado por Juan (11 intervenciones) el 26/05/2016 01:31:01

Hola amigo, si hay un menú horizontal justo a la izquierda del reproductor de música, arriba de todo.

Las opciones son CHz-Radio, Propuesta y Contactos.

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Evan (20 intervenciones) el 27/05/2016 14:37:39

Es verdad lo que dice xve, no hay ningun menu o almenos no se deja ver...

Tendrias que verlo tu a una resolucion standard y con un navegador diferentes o bien borrar las cookies, como para que lo veas como lo vemos todos nosotros, porque al parecer tu lo ves y los demas no!

Ademas te acosejo que si vas a necesitar ayuda y tienes potegida la pagina del boton derecho del mouse, hace que sea mas dificil poder ayudarte!

Saludos...

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Juan (11 intervenciones) el 29/05/2016 20:01:45

Con respecto a que no pueden visualizar el Menu, les comento que yo lo veo perfecto tanto en Mozilla, Chrome como IE.
Mi resolución de pantalla es de 1360 x 768 px.
Lo más probable es que no me quedó bien configurada la web para otras resoluciones de pantalla :S
Intenté hacer un diseño responsive, pero como se poco de esto, no me quedó nada bien.

Con lo otro de deshabilitar la tecla Control y click derecho del mouse, lo hice hace mucho tiempo porque personas principiantes como yo que tenían radio, intentaron copiarme el código fuente.
De echo, jamás queda protegido el código de esta forma, cualquiera con algo de conocimiento lo puede ver, incluso con un addons de Mozilla se puede ver todo.

Les envio por mensaje privado, el addon que uso para que puedan ver correctamente cada trozo de código de toda la página.

Mil disculpas por no advertir que les podría dificultar la tarea :$

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Evan (20 intervenciones) el 29/05/2016 21:21:15

Bueno inspeccionando la fuente de tu web encontré tu menú....
Al parecer el problema de la visualización se debe a que el z-index no esta declarado y toma el por defecto lo que el navegador le asigna por defecto, es por eso que no se puede ver, luego de agregarle un z-index de 100 el menú apareció justo donde mencionabas.

Así que vamos por paso:

/* Menu Bar */

#wb_element_instance0 {z-index: 100;}

Luego de que soluciones eso, me dices que necesitas y como lo quieres!

Saludos...

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Juan (11 intervenciones) el 01/06/2016 18:30:15

En algunos @media lo tenía configurado con z-index: 234
pero ya he corregido todos y agregados en los que faltaba, ahora todos los #wb_element_instance0 los puse a 100

Espero que lo puedas visualizar, cualquier cosa me comentas si tengo que corregir algo mas.

Gracias Evan :)

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Evan (20 intervenciones) el 01/06/2016 21:08:12

Bueno al parecer, no se ven los resultados y por no que vi al inspeccionar la pagina el css que interviene en esta web es muy enroscado. No es que no se pueda solucionar, es solo que para que esto tenga una solución primero tu debes ser capas de ver el error, cosa que no pasa! Recuerda los estandartes de programación al momento de programar tu web!

El problema sigue siendo el z-index pero al modificar uno otro toma el valor incorrecto.. La única manera de ver tu menú es usando tu resolución de pantalla, eso habla de que los media query están mal, otra cosa es que si lo que tu necesitas es cambiar las transiciones o animaciones etc... no necesitas de mucha ayuda, tu mismo puedes hacértelas usando las herramientas web que existen online.

Aquí un ejemplo.
http://www.css3maker.com/css3-transition.html

Ahora te he subido una captura de tu web, desde mi ordenador!

http://s33.postimg.org/s2ixbr1kf/Cap01.png

y por las dudas algo de Z-Index
https://developer.mozilla.org/es/docs/Web/CSS/z-index

Saludos!

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Juan (11 intervenciones) el 02/06/2016 13:41:03

Gracias Evan, ya estudiaré algún día con tiempo eso ya que el sitio está en producción.
El asunto es q esta web estubo mal diseñada desde sus comienzos, ya que usé el constructor de sitios Zyro.

Ahora me he independizado de ese constructor, solo queda en el nombre de las carpetas, pero modifico todo por html y css.
Me apena que los que no tengan la misma resolución de pantalla vean tan fea la web :S

Es cierto lo que me comentas de los @media, si bien están todos los tamaños de pantalla, los valores son idénticos y es obvio que los valores deben de ser distintos para cada resolución.

El tema que al momento de "separarme" del antiguo Zyro, no modifiqué las demás @medias porque no sabía que parámetros ponerle.

Ya lo veré algún día con tiempo.

Agradezco tu invalorable ayuda.

Un abrazo

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Evan (20 intervenciones) el 02/06/2016 16:17:05

No hay problema amigo, cuando uno comienza siempre usa software y cosas por el estilo... luego uno aprende y cambia a notepad jaja.

cualquier cosa aquí estamos....

Saludos!

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Juan (11 intervenciones) el 18/06/2016 03:54:21

Creo que lo he conseguido!

Ya me comentarán si pueden ver el menú y todo el contenido bien.
Creo que antes tampoco veían una transparencia que está por encima y por debajo del reproductor de música, de acuerdo a la captura de pantalla que compartió Evan.

Muchas gracias por todo y acepto vuestras críticas constructivas. :)

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Evan Hailey (20 intervenciones) el 19/06/2016 03:54:13

Que bien amigo, ahora si se puede ver el menú felicidades!

por lo que veo tu menú cuenta con tres botones y no posee ningún efecto hover ni nada por el estilo, no se bien que es lo que pretendas hacer ahí, pero bueno te tiro algo como para ir viendo...

La clase de tu menú por lo que veo es (hmenu), así que podrías hacer un efecto básico como que el fondo se coloree al pasar el ratón..

.hmenu li :hover {background: red;}

Eso es para ir arrancando, ya tu sabrás que mas le colgaras a ese efecto para lograr lo que te agrade...

Para el tema de la transición es algo simple, yo lo que suelo hacer es crear una transición para todo y listo.

* {

	-webkit-transition: all 0.5s ease-in-out;

	-moz-transition: all 0.5s ease-in-out;

	-ms-transition: all 0.5s ease-in-out;

	-o-transition: all 0.5s ease-in-out;

	transition: all 0.5s ease-in-out;

No olvides que muchas veces cuando usas estos diseñadores de sitios usan muchas clases y atributos de todo tipo, así que puedes valerte de ( !important ) para obligar al navegador a priorizar tu estilo sobre otro que interfiera.

Saludos!!

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Juan (11 intervenciones) el 23/06/2016 23:08:14

Hola Evan y gracias por tus comentarios y tu interés en mejorar la web.

Te quería preguntar en cual de los .CSS ó donde pongo ese código.
La página tiene un .css por cada opción del menú y además posee otros como site.css y common.css.

En el archivo site.css encontré referencias al menú:

.vmenu,

.hmenu      {

   display: block; list-style-type: none; padding: 0px; margin: 0px; width: 100%;

   height: 100%; float: left; overflow: visible;

.hmenu { white-space: nowrap; }

.vmenu li,

.hmenu li      { position: relative; display: block; display: inline-block; padding: 0px; margin: 0px; }

.vmenu li      { clear: both; display: block; }

.vmenu li a,

.hmenu li a { display: block; }

.vmenu ul,

.hmenu ul   { display: none; position: absolute; margin-left: 0; padding-left: 0; left: 100%; top: 0; }

.vmenu ul li,

.hmenu ul li   { display: block; }

.hmenu ul li:first-child,

.vmenu ul li:first-child { margin-top: 0 ! important; }

.hmenu > li > ul { left: 0; top: 100%; }

.hmenu li:hover > ul, .vmenu li:hover > ul { display: block; }

.vmenu ul a, .hmenu ul a { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

¿Es en ese archivo que debo modificar? ¿Cómo quedaría el código modificado?

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Evan Hailey (20 intervenciones) el 23/06/2016 23:59:06

Bien, te voy a responder de modo relativo para que salves esta inquietud en este caso y para los que se presenten en el futuro...

Para saber donde colocar "X" código css solo basta con mirar el head de tu sitio y ver las hojas de estilos que tiene enlazadas. Por lo general, cuando uno diseña cualquier cosa busca que todo valla lo mas ordenado posible por una cuestión de prolijidad y para no perderse después en nuestro mismo código, es por eso que suele aver varias hojas de estilo en un sitio, es mas que nada para que todo este mas ordenado y mas si el código del sitio es mucho, seria un coas si esta desordenado.

Esto significa que tu puedes colocarlo en cualquier hoja de las vinculadas en el head, pero seria mejor si lo colocas en la que tenga relación con el menú, para que lógicamente aya un orden.

Con respecto a las modificaciones tendría que examinar toda la plantilla de tu sitio para estas exactamente seguro de como seria y como podría ser y eso seria muchísimo trabajo y para ti que tienes el código a mano te seria mucho mas simple... Lo que puedes hacer es tu mismo construir el código y donde te quedes ir preguntando y averiguando para lograr lo deseado.

Recuerda, la mejor manera de aprender es echando mano uno y informarse.

Saludos!

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Juan (11 intervenciones) el 24/06/2016 05:00:23

Muy cierto Evan, en realidad me gusta leer y aprender antes de pedir que me hagan las cosas.
Yo programo en 2 lenguajes, pero el tema de las webs te soy sincero nunca me puse aprender en serio.

Por eso usé ese constructor de sitio, hasta que comencé a programarla yo.
Y cuando uno no es el que programó un código se pierde, es nomal, más con estos constructores que complican mucho los códigos que se pueden simplificar mucho si los hace uno mismo.

El tema que aprender el tema de las webs es aprender varios lenguajes a la vez, html, javascript, css, php y es mucho para digerir de cero.

Y como el sitio está en producción pregunto para no cometer errores y me quede el sitio inservible.
Si tu fueras a introducir el código que me aconsejaste en el site.css que te compartí ¿como lo harías?

Si en algún momento tienes tiempo de verlo te agradezco, no quiero meter la pata por eso te molesto.

Un abrazo y disculpame si estoy abusando de tu tiempo.

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Evan Hailey (20 intervenciones) el 24/06/2016 12:54:00

Ve a tu directorio http://www.chathizpano.com/css/site.css busca alguna parte donde se mencione el menú creo que es maso o menos por la linea 420 códigos da dos saltos de linea y crea un comentario /* AQUÍ PUSE MI CÖDIGO */ y debajo lo pegas, recargas el sitio asegurándote de que las cookies sean borradas para recargar bien los cambios.

Si ves que algo sale mal, te vas a donde pusiste el comentario y retiras el código!

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Juan (11 intervenciones) el 24/06/2016 16:55:02

Gracias Evan por tu amable ayuda, pero no funcionó.

La línea 420 era justamente la linea en blanco que seguía al código anterior que te copié.
El código comienza en la línea 400 y termina en la 419.

En la 420 va el comentario /* AQUÍ PUSE MI CÖDIGO */ y luego lo que me has compartido.
Te copio el código completo, quizá cometí algún error:

.vmenu,

.hmenu      {

   display: block; list-style-type: none; padding: 0px; margin: 0px; width: 100%;

   height: 100%; float: left; overflow: visible;

.hmenu { white-space: nowrap; }

.vmenu li,

.hmenu li      { position: relative; display: block; display: inline-block; padding: 0px; margin: 0px; }

.vmenu li      { clear: both; display: block; }

.vmenu li a,

.hmenu li a { display: block; }

.vmenu ul,

.hmenu ul   { display: none; position: absolute; margin-left: 0; padding-left: 0; left: 100%; top: 0; }

.vmenu ul li,

.hmenu ul li   { display: block; }

.hmenu ul li:first-child,

.vmenu ul li:first-child { margin-top: 0 ! important; }

.hmenu > li > ul { left: 0; top: 100%; }

.hmenu li:hover > ul, .vmenu li:hover > ul { display: block; }

.vmenu ul a, .hmenu ul a { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

/* AQUÍ PUSE MI CÖDIGO */

.hmenu li :hover {background: red;}

* {

	-webkit-transition: all 0.5s ease-in-out;

	-moz-transition: all 0.5s ease-in-out;

	-ms-transition: all 0.5s ease-in-out;

	-o-transition: all 0.5s ease-in-out;

	transition: all 0.5s ease-in-out;

Quizá pueda ser lo que me comentabas antes del ( !important ).
Si ves que está bien copiado y es que no funciona, no te preocupes, no es muy importante ese detalle de la transición.
Al menos fuiste el único de aqui que gastó parte de su tiempo y se preocupó en ayudarme, eso ya para mi vale y mucho.

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Evan Hailey (20 intervenciones) el 24/06/2016 23:10:51

bueno, al parecer no esta tomando el css aunque ahí esté!

Vamos a ver el motivo porque a mi aquí se me da bien, podemos probar un estilo simple para ver que funcione y luego lo personalizamos a gusto, así lo hacemos paso a paso y damos una solución a este problema.

No se como sera tu host pero si puedes subir archivos puedes hacer una hoja de estilo nueva para que no se mezclen tus nuevos ajustes con los que ya existen en la plantilla.

Crea un archivo con el bloc de notas con el nombre "mystylesheet.css" y guarda el siguiente código en el...

#wb_element_instance0 ul li a:hover{background: green!important;}

luego sube el archivo a tu sitio y colócalo en el directorio "css" ya cuando termines este paso abres tu plantilla y buscas en el html de tu sitio la sección "HEAD" y antes de su cierre ahí colocas este enlace a tu hoja nueva.

<link href="css/mystylesheet.css" rel="stylesheet" type="text/css">

Si todo eso salio bien, tu menú debería ponerse en verde al pasar el ratón.

PD: Asegúrate que el archivo creado el bloc de notas no te lo guarde como txt porque no funcionara.. Luego nos dices que tal te fue.

Saludos!

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Juan (11 intervenciones) el 27/06/2016 20:17:15

Gracias Evan, funcionó perfecto, sólo le cambié el color verde por un gris plomo.

Valora esta respuesta

Comentar

Transición suave entre opciones de menu

Publicado por Evan Hailey (20 intervenciones) el 27/06/2016 21:09:19

Que bien juan, me alegro que pudieras solucionar tu problema..

Cualquier cosa, aquí estaremos!!

Saludos.

Valora esta respuesta

Comentar

Menu activado con click en lugar de hover

Opcion Inicio del menu me queda siempre activada.