Trancisión suave entre opciones de menu

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[chathizpano punto com], el cambio al dar clik entre una opción y otra del menú se da de forma abrupta.

Se trata de un menú horizontal que está ubicado arriba de la página, precisamente a la izquierda del reproductor de música, cuyas 3 opciones CHz-Radio, Propuesta y Contactos son páginas diferentes, vale decir, cada opción del menu es un PHP diferente (1.php. 2.php y 5.php), con contenido HTML en su interior.

CODIGO HTML de opción CHz-Radio (1.php):

<div id="wb_element_instance0" class="wb_element"><ul class="hmenu"><li class="active"><a href="CHz-Radio/" target="_self" title="CHz-Radio">CHz-RaDiO</a></li><li><a href="Propuesta/" target="_self" title="Propuesta">Propuesta</a></li><li><a href="Contacto/" target="_self" title="Contacto">Contactos</a></li></ul></div>

CODIGO CSS de opción CHz-Radio (1.css):

#wb_element_instance0 li:hover > a, #wb_element_instance0 li:focus > a { border: 0px none #000000; font: normal bold 0.875em Ubuntu,sans-serif; text-decoration: none; color: #ffffff; line-height: 16px; }

#wb_element_instance0 li.active > a { border: 0px none #000000; font: normal bold 0.875em Ubuntu,sans-serif; text-decoration: none; color: #ffffff; line-height: 16px; background: #cb5a83 none repeat-x scroll left top; }

CODIGO HTML de opción Propuesta (2.php):

<div id="wb_element_instance22" class="wb_element"><ul class="hmenu"><li><a href="CHz-Radio/" target="_self" title="CHz- Radio">CHz-RaDiO</a></li><li class="active"><a href="Propuesta/" target="_self" title="Propuesta">Propuesta</a></li><li><a href="Contacto/" target="_self" title="Contacto">Contactos</a></li></ul></div>

CODIGO CSS de opción Propuesta (2.css):

#wb_element_instance22 li:hover > a, #wb_element_instance22 li:focus > a { border: 0px none #000000; font: normal bold 0.875em Ubuntu,sans-serif; text-decoration: none; color: #ffffff; line-height: 16px; }

#wb_element_instance22 li.active > a { border: 0px none #000000; font: normal bold 0.875em Ubuntu,sans-serif; text-decoration: none; color: #ffffff; line-height: 16px; background: #cb5a83 none repeat-x scroll left top; }

CODIGO HTML de opción Contactos (5.php):

<div id="wb_element_instance40" class="wb_element"><ul class="hmenu"><li><a href="CHz-Radio/" target="_self" title="CHz- Radio">CHz-RaDiO</a></li><li><a href="Propuesta/" target="_self" title="Propuesta">Propuesta</a></li><li class="active"><a href="Contacto/" target="_self" title="Contacto">Contactos</a></li></ul></div>

CODIGO CSS de opción Contactos (5.css):

#wb_element_instance40 li:hover > a, #wb_element_instance40 li:focus > a { border: 0px none #000000; font: normal bold 0.875em Ubuntu,sans-serif; text-decoration: none; color: #ffffff; line-height: 16px; }

#wb_element_instance40 li.active > a { border: 0px none #000000; font: normal bold 0.875em Ubuntu,sans-serif; text-decoration: none; color: #ffffff; line-height: 16px; background: #cb5a83 none repeat-x scroll left top; }

CODIGO CSS del site.css (aplicable a todas las opciones anteriores):

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

Hola!

Lo que pides no es tan fácil de hacer. De hecho, para poder capturar la transición entre páginas, la única forma de hacerlo es sin recargar la página, lo que se logra a través de Javascript y AJAX (o, para simplificarlo, jQuery). No es posible hacerlo sólo con CSS al hacer clic.

Yo lo he visto en CSS, lo único es que como soy nuevo en esto no se implementarlo, más teniendo en cuenta que cada opción del menú es una página distinta, como lo comenté antes.

Te dejaré un ejemplo de trancisión suave en CSS y más abajo te pongo la fuente de donde lo obtuve:

.menudes a {
border-right: 2px solid #fff;
position: relative;
z-index: 2;
}
.menudes a:last-child {
border-right:2px solid transparent;
}
.marca {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: -30%;
width: 25%;
height: 40px;
background: #fff;
opacity:.5;
transition: 0.5s ease-in-out;
z-index: 1;
}
.menudes a:hover ~ .marca2 {
margin-left: -1px;
}
.menudes a:nth-child(1):hover ~ .marca {
left: 0%;
}
.menudes a:nth-child(2):hover ~ .marca {
left: 25%; /* 1/4 del ancho total */
}
.menudes a:nth-child(3):hover ~ .marca {
left: 50%; /* 2/4 del ancho total */
}
.menudes a:nth-child(4):hover ~ .marca {
left: 75%; /* 3/4 del ancho total */
}

Fuente: http://www.oloblogger.com/2013/10/menu-con-hover-deslizante.html

skaparate escribió:Hola!

Lo que pides no es tan fácil de hacer. De hecho, para poder capturar la transición entre páginas, la única forma de hacerlo es sin recargar la página, lo que se logra a través de Javascript y AJAX (o, para simplificarlo, jQuery). No es posible hacerlo sólo con CSS al hacer clic.

Ah! Pero hay una gran diferencia entre tu pregunta y el ejemplo:

Tú, preguntas "¿Es posible que se de el efecto de desplazamiento suave del color rosa al dar click entre una opción y la otra?", mientras que el ejemplo muestra "cómo hacer una transición suave al pasar el mouse sobre un elemento". Lo primero no se puede realizar sin Javascript (o alguna forma de saber cuándo la página se cargó), mientras que lo segundo sí, así que: ¿qué es lo que realmente quieres hacer?

¿Por qué deshabilitaste la tecla "Control"? ¿Para prevenir que roben tu sitio? Si es así, entonces no sirve. No hay forma de prevenir que roben el contenido HTML ni CSS. Lo que sí puedes hacer el ofuscar el código Javascript (que en tu caso al parecer no aplica :P).

Yo personalmente no se si me tomaría semejante trabajo...con Javascript se debería poder hacer pero no sabría ayudarte..suerte!

skaparate escribió:Ah! Pero hay una gran diferencia entre tu pregunta y el ejemplo:

Tú, preguntas "¿Es posible que se de el efecto de desplazamiento suave del color rosa al dar click entre una opción y la otra?", mientras que el ejemplo muestra "cómo hacer una transición suave al pasar el mouse sobre un elemento". Lo primero no se puede realizar sin Javascript (o alguna forma de saber cuándo la página se cargó), mientras que lo segundo sí, así que: ¿qué es lo que realmente quieres hacer?

Es cierto skaparate, lo que deseo es lo primero y el ejemplo que te puse es de lo segundo. :oops:

skaparate escribió: ¿Por qué deshabilitaste la tecla "Control"? ¿Para prevenir que roben tu sitio? Si es así, entonces no sirve. No hay forma de prevenir que roben el contenido HTML ni CSS. Lo que sí puedes hacer el ofuscar el código Javascript (que en tu caso al parecer no aplica :P).

También es cierto, deshabilite el control y el click derecho hace mucho, porque otras radios andaban mirando de copiarme códigos fuente, que de echo sirve solo para principiantes. ;)

Lo dejamos así, veo que es complicado hacerlo en CSS y no quiero agregarle más Javascript a la página, que de echo ya tiene demasiado contenido en Javascript y mirando en páginas que rankean y controlan diseños amigables de web, fue una de las críticas que me realizaron.

Te envío un abrazo y muchas gracias por la molestia que te has tomado en solucionar el problema. :)

SEODonostia escribió:Yo personalmente no se si me tomaría semejante trabajo...con Javascript se debería poder hacer pero no sabría ayudarte..suerte!

Es cierto, creo que lo dejaré así, como le decia a skaparate no deseo agregarle más contenido Javascript a la web.

Muchas gracias por tu amable ayuda. :)

Lo dejamos así, veo que es complicado hacerlo en CSS y no quiero agregarle más Javascript a la página, que de echo ya tiene demasiado contenido en Javascript y mirando en páginas que rankean y controlan diseños amigables de web, fue una de las críticas que me realizaron.

Las páginas que "rankean" el contenido web no importan mucho, pues la opinión (tal vez dos) que más vale es Google.

Google es el creador de AngularJS, un framework para Javascript. Además de Angular, existen otro que hacen lo mismo (Backbone, por ejemplo), pero lo importante es que todos estos framework permiten el contenido SEO o "sitios web amigables". De hecho, es imposible tener contenido dinámico sin utilizar Javascript. Si no se pudiera tener una página bien "rankeada" en Javascript, Google no hubiera creado Angular, creo.

Además del SEO, también existe el contenido para los usuarios con discapacidades visuales, cosa que también está soportada entre Javascript y HTML.

Por último, hay más de una forma de conseguir un buen ranking con un sitio web que sólo utiliza Javascript :), sólo hay que investigar.

Espero que le pierdan el miedo a Javascript :) y dejemos de lado las supersticiones.

Saludos :).

jajjaja, es muy cierto lo que comentas skaparate.
Ya veremos como queda, es que mi web estubo mal diseñada desde sus comienzos ya que usé un constructor de sitios (Zyro).
Luego comencé a programar todo desde mi server, ahora estoy independizado de Zyro en cuando a modificaciones se refiere.

Igual dejé el nombre de las carpetas y la arquitectura de Zyro, que de echo no usa bases de datos, es todo código y eso creo q enlentece la carga de mi web.
Además repite códigos, al usar una url diferente para cada opción del menú (varios php, para un contenido similar).

Un día con tiempo voy a unificar todo el code en un solo php y un solo css que maneje las configuraciones de monitores y navegadores.
Se me dificultó mucho realizar un diseño responsive que tome las configuraciones dependiendo del dispositivo (pc, móvil, laptop, tablet..).
Encontré muchos ejemplos en Javascript y CSS, pero lo intenté pero nada quedaba bien, no tomaba bien los tamaños de las pantallas y decidí dejarlo así por ahora porque el sitio está en producción.

skaparate escribió:Las páginas que "rankean" el contenido web no importan mucho, pues la opinión (tal vez dos) que más vale es Google.

Google es el creador de AngularJS, un framework para Javascript. Además de Angular, existen otro que hacen lo mismo (Backbone, por ejemplo), pero lo importante es que todos estos framework permiten el contenido SEO o "sitios web amigables". De hecho, es imposible tener contenido dinámico sin utilizar Javascript. Si no se pudiera tener una página bien "rankeada" en Javascript, Google no hubiera creado Angular, creo.

Además del SEO, también existe el contenido para los usuarios con discapacidades visuales, cosa que también está soportada entre Javascript y HTML.

Por último, hay más de una forma de conseguir un buen ranking con un sitio web que sólo utiliza Javascript :), sólo hay que investigar.

Espero que le pierdan el miedo a Javascript :) y dejemos de lado las supersticiones.

Saludos :).

Un día con tiempo voy a unificar todo el code en un solo php y un solo css que maneje las configuraciones de monitores y navegadores.
Se me dificultó mucho realizar un diseño responsive que tome las configuraciones dependiendo del dispositivo (pc, móvil, laptop, tablet..).
Encontré muchos ejemplos en Javascript y CSS, pero lo intenté pero nada quedaba bien, no tomaba bien los tamaños de las pantallas y decidí dejarlo así por ahora porque el sitio está en producción.

Bueno, si tienes dudas, el foro está para eso :P.

Para los problemas de "tamaño de pantalla" y cosas similares, existen otros frameworks para CSS. Creo, y me puedo equivocar, que el más utilizado es Bootstrap que, aunque debes entender conceptos como las "media queries", ayuda mucho a la hora de resolver ese tipo de problemas. No es el único que existe tampoco, así que, si no te gustase, podrías buscar otro que haga lo mismo o similar.

Saludos y suerte con tu sitio :).

El que tengo es justamente el Bootstrap, lo que tengo configurado mal son todos los @media ya que estube mirando unas paginas de simuladores de tamñano de pantallas y dispositivos pero siempre veo mal cuando cambio los valores.

¿Conoces alguna web donde tenga un buen simulador de tamaños de pantalla para poder ir de apoco configurando cada uno de los @media?

skaparate escribió:Bueno, si tienes dudas, el foro está para eso :P.

Para los problemas de "tamaño de pantalla" y cosas similares, existen otros frameworks para CSS. Creo, y me puedo equivocar, que el más utilizado es Bootstrap que, aunque debes entender conceptos como las "media queries", ayuda mucho a la hora de resolver ese tipo de problemas. No es el único que existe tampoco, así que, si no te gustase, podrías buscar otro que haga lo mismo o similar.

Saludos y suerte con tu sitio :).

Las herramientas para desarrolladores tienen. En Google Chrome, presiona F12 para mostrar las herramientas. Presiona Control + Shift + M (en la ventana de las herramientas) para activar el dispositivo y arriba podrás seleccionar el dispositivo a utilizar (hay varios pre-configurados) o cambiar la resolución.

Gracias skaparate, cuando baje un poco el trabajo en la radio, voy a ver si puedo programar la web como dios manda.

skaparate escribió:Las herramientas para desarrolladores tienen. En Google Chrome, presiona F12 para mostrar las herramientas. Presiona Control + Shift + M (en la ventana de las herramientas) para activar el dispositivo y arriba podrás seleccionar el dispositivo a utilizar (hay varios pre-configurados) o cambiar la resolución.

que bueno!! por fin encuentro lo que buscaba!!

mariatorrete escribió:que bueno!! por fin encuentro lo que buscaba!!

Me alegro mariatorrete que la apertura de este post te haya ayudado a encontrar lo que buscabas.
Los invito a que miren mi web como ha quedado luego de algunas reformillas para adaptarlas a los navegadores y tamaños de pantallas.
Acepto vuestras criticas constructivas y nuevamente las gracias a skaparate por su ayuda y apoyo.