31/01/2013, 06:50
|
 | | | Fecha de Ingreso: febrero-2012 Ubicación: La Línea (Cádiz)
Mensajes: 47
Antigüedad: 12 años, 2 meses Puntos: 5 | |
| Respuesta: Menu CSS3
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. |