Menú Slide de la página de Apple
4 seguidores
Hola,
He destripado la página de apple, apple.com/startpage/ en busca de ese script que tiene en el menú, que se despliegan cuando pasas el cursor por la pestaña.
He encontrado el .js que contiene la función.
He copiado integramente el contenido del .js y del .css y he intentado que funcione. Pero aun siendo idénticamente iguales, en la página que tengo en mi sistema no funciona. Copié el mismo código de la principal de apple, duplicándo todos los estilos y los .js . Aun así, sigue sin ir cuando es en mi ordenador.
¿Qué me estoy saltando?
Gracias de antemano.
jgarciaher
El nuevo Dreamweaver CS3 trae "de serie" este tipo de efectos llamados "spry". Son totalmente configurables y con un poco de maña y práctica los puedes editar a tu gusto. Pruébalos a ver si te sirve.
hartum
has probado la clase "acordeon" de madformilk
maltieri
Por si a alguien le interesa el tema...
He encontrado una solución.
http://www.harrymaugans.com/2007/03/06/how-to-create-an-animated-sliding-collapsible-div-with-javascript-and-css/
Aquí tienen más o menos la misma función.
Para conseguir el aspecto del slide de apple lo que he hecho es darle al hipervínculo la doble funcion:
<code>onmousemove="slidedown('mydiv');" onmouseover="slideup('mydiv2')</code>
Por lo que al pulsar sobre el siguiente, se ocultará el primer div.
Ahora estoy tratando de que en vez de ocultarse solo el primero, se oculten todos. Pero no encuentro la forma de asignarle varias opciones al mouseover. Voy probando.
Espero que sirva a alguien de ayuda.
A mi me tienen haciendo un catálogo online y se le antojó al cliente lo de los menus slide estos... Y sin flash ni cosas de esas.
En fin, un saludo y gracias orange.
orange
Yo no soy muy ducho en JavaScript (de hecho casi no tengo ni guarra) pero lo que veo en esa página son llamadas a funciones que parecen encapsuladas en otros NAMESPACE's: Event.observe(...) AC.SlidingBureau(...)
Tendrás que encontrar esas funciones para que todo te funcione.
En cualquier caso ahí va otro consejo. El código que todos picamos es público y está a la vista de todo el mundo, todos hemos aprendido de código que está online y a mi me parece un excelente método para hacer cosas nuevas.
Pero la clave, a mi modo de ver, está en aprender no en copiar. Es decir en lugar de copiar, pegar y esperar que funcione deberíamos tratar de comprender qué hace el código y aplicarlo a nuestros propios proyectos.
No te lo tomes como algo directamente aplicado a tu caso, sino como una reflexión en voz alta.
;)
maltieri
Probaré con algo más claro...
Hay un .js llamado startpage.js (aquí se puede ver: http://www.apple.com/startpage/scripts/startpage.js)
Y este es la parte que me interesa, el itunesslider
<code>var itunesSlider = null;
Event.observe(window, 'load', function() {
var container = $('itunesslider');
itunesSlider = new AC.SlidingBureau(container);
var drawers = $$("#itunesslider .drawers>li");
for (var i = 0; i < drawers.length; i++) {
var handle = drawers[i].getElementsByClassName('drawer-handle')[0];
var content = drawers[i].getElementsByClassName('drawer-content')[0];
var drawer = new AC.SlidingDrawer(content, handle, itunesSlider, {
triggerEvent: 'mouseover', triggerDelay: 120});
itunesSlider.addDrawer(drawer);
}
setTimeout(freeDrawers(container), 1000);
});</code>
He duplicado este archivo, he aplicado las mismas caracteristicas a los div de los menús. El "id=itunesslider". Tal y como está contruída la página de apple.
Aquí van preguntas:
¿Puede ser que la página de apple sea un php que esconde funciones que no se muestran en el codigo fuente al reproducirlas en html (no sé si me explico?
¿Para que funcione mi página debería estar en otro formato que no fuese html?
No sé que veis...
orange
Voy a darte una respuesta igual de concreta que tu pregunta: "Algo haces mal"