Menu CSS3

[kurikuri]

Hola mi nombre es kuri, estoy ingresando a esta pagina para aprender mas y enseñar lo que pueda. En este momento yo cuento con una duda, no soy experto todavia en CSS y se me dificulta una cosa, yo creo que es muy sencilla pero me esta dando de cocos .

Bueno, lo que pasa es que estoy interesado en tener un menu como el de [URL="http://www.samsung.com/mx/"]http://www.samsung.com/mx/[/URL] lo que me parece genial de ese menu es que cuando tu pasas el raton por uno de los links del menu, en la parte de arriba del menu la imagen cambia, pero si tu pasas el raton por orto link del mismo menu, la imagen cambia de nuevo con referencia al link que estas seleccionando.

Yo se que se trata de un hover, y todo eso, pero, se me ha estado dificultando el aplicarlo a mi sitio web.

No se como me puedan ayudar, si pasandome un codigo de ejemplo, pasandome el link de algun tutorial, o ayudandome personalmente con el codigo de mi pagina.

Si alguien me ayuda estare muy agradecido y prometo compartir mi conocimiento a quien pueda en esta pagina.

Gracias por su atencion y les mando un saludo.

[leoass]

hola kuri. Mira, veo que no estas distinguiendo bien las cosas. Lo que esta pasando en ese menu cuando pasas el mouse, es que te cambia la imagen de fondo de blanco a negro. y lo que vos decis que cambia es la letra azul verdad? si es eso, es por que tiene un link la palabra del menu. Si queres saber como hacer para cambiar la imagen cuando pases el mouse por encima, avisa.

[kurikuri]

Si, eso es exactamente lo que quiero, que cuando pasen el mouse por uno de los links del menu, la imagen cambie.

[kurikuri]

Iniciado por leoass

hola kuri. Mira, veo que no estas distinguiendo bien las cosas. Lo que esta pasando en ese menu cuando pasas el mouse, es que te cambia la imagen de fondo de blanco a negro. y lo que vos decis que cambia es la letra azul verdad? si es eso, es por que tiene un link la palabra del menu. Si queres saber como hacer para cambiar la imagen cuando pases el mouse por encima, avisa.

Si, eso es exactamente lo que quiero, que cuando pasen el mouse por uno de los links del menu, la imagen cambie dependiendo lo seleccionado.

Por ejemplo, en la opcion del menu "CONSUMIDOR" esta la seccion de "Teléfonos celulares", en la cual estan las opciones Telcel, Movistar, Iusacell, Unefon, Galaxy Note, Tablets y Galaxy Camera. Lo que pasa es que cuando pasas el menu por esas opciones la imagen que esta arriba de "Telefonos celulares" cambia dependiendo de cual de los links esta tu mouse arriba.

[twilvaro]

En cuanto a CSS; si inspeccionas la imagen del menú (con Chrome por ejemplo) verás que se trata de un párrafo con clase "figure" que contiene un span con un estilo CSS definido en la misma línea HTML. Este dice la posición del fondo de ese span (por defecto style="background-position: -90px 0px;").

El fondo está declarado en http://www.samsung.com/es/common/css/samsung.css (línea 105, usa la técnica Sprite y su ruta es http://www.samsung.com/es/consumer-images/gnb-images/img_gnb_consumer.jpg). La cosa es que cuando vas pasando sobre los enlaces del menú la posición del fondo va cambiando, localizando cada icono en el Sprite.

Por ejemplo: Cuando pasas sobre Blu-ray la posición definida en el span es style="background-position: -90px -90px;. Cuando pasas sobre Home Cinemas, la posición cambia a style="background-position: -90px -270px;. Así con todos.

Si analizas la imagen del sprite que te he dado antes (img_gnb_consumer.jpg) verás que cada fila vertical corresponde a una sección del menú de Consumidor. La primera pertenece a Dispositivos móviles, la segunda a Televisores Imagen & Sonido, y así sucesivamente.

Como te he dicho puedes observarlo tú mismo usando el inspector de elementos de Chrome o Firebug de Firefox.

Luego, creo que para conseguir que cambie la posición del fondo (es decir, que cambie el icono, que lo localice en el sprite y lo muestre) al pasar por cada enlace del menú usan JavaScript. Digo creo porque soy novato en esto y no estoy seguro.

A ver si alguien con más conocimientos te lo confirma, para que pases el post a JavaScript y así te sepan ayudar mejor.

Sé que no te he solucionado nada, pero espero que al menos te haya orientado un poco.

Un saludo.

[kurikuri]

Iniciado por twilvaro

En cuanto a CSS; si inspeccionas la imagen del menú (con Chrome por ejemplo) verás que se trata de un párrafo con clase "figure" que contiene un span con un estilo CSS definido en la misma línea HTML. Este dice la posición del fondo de ese span (por defecto style="background-position: -90px 0px;").

El fondo está declarado en http://www.samsung.com/es/common/css/samsung.css (línea 105, usa la técnica Sprite y su ruta es http://www.samsung.com/es/consumer-images/gnb-images/img_gnb_consumer.jpg). La cosa es que cuando vas pasando sobre los enlaces del menú la posición del fondo va cambiando, localizando cada icono en el Sprite.

Por ejemplo: Cuando pasas sobre Blu-ray la posición definida en el span es style="background-position: -90px -90px;. Cuando pasas sobre Home Cinemas, la posición cambia a style="background-position: -90px -270px;. Así con todos.

Si analizas la imagen del sprite que te he dado antes (img_gnb_consumer.jpg) verás que cada fila vertical corresponde a una sección del menú de Consumidor. La primera pertenece a Dispositivos móviles, la segunda a Televisores Imagen & Sonido, y así sucesivamente.

Como te he dicho puedes observarlo tú mismo usando el inspector de elementos de Chrome o Firebug de Firefox.

Luego, creo que para conseguir que cambie la posición del fondo (es decir, que cambie el icono, que lo localice en el sprite y lo muestre) al pasar por cada enlace del menú usan JavaScript. Digo creo porque soy novato en esto y no estoy seguro.

A ver si alguien con más conocimientos te lo confirma, para que pases el post a JavaScript y así te sepan ayudar mejor.

Sé que no te he solucionado nada, pero espero que al menos te haya orientado un poco.

Un saludo.

Muchas gracias, si he entendido un poco pero si necesito un tutorial mas especifico para poder implementarlo en mi sitio, de igual manera les paso el link de mi sitio web por si lo quieren ver, analizar o ayudar en lo posible.

http://elektrozales.com/

les mando un saludo y sigo esperando su ayuda, muchas gracias =D