¿Echas de menos Flash? Los efectos que se logran con este programa son irremplazables, pero ha habido que ceder un poco a favor de la funcionalidad e interactividad de la Web. En cualquier caso Flash también es código, asà que para conseguir algunos movimientos útiles también nos podemos ayudar de JavaScript, en este caso de la librerÃa JQuery.
Ejemplo 1: Menú con Desplazamiento Horizontal
HTML
Un div contenedor (#menu_hor) y otros tantos div(#menu1, #menu2 y #menu3) como elementos de menú se quiera.
CSS
Es importante que el div contenedor (#menu_hor) tenga asignada una posición relativa, de esa manera al asignarle una posición absoluta a los tres menus interiores, su posición será con respecto a este div. Otra propiedad importante sera que el desbordamiento sea oculto, para que únicamente muestre aquella parte de las imagenes que nos interesa. Sus medidas dependeran de las imagenes que se utilicen.
Para los elementos del menú, la clase que apliquemos servirá de referenencia para ejecutar los cambios con javascript. Aquà lo importante es su posicionamiento, que debe ser absoluto, y su ubicación dentro del contenedor, que dependerá de cada elemento: left:0px, left:40px y left:80px. De esa forma se muestran las leyendas situadas en el extremo izquierdo.
JQuery
La clase JavaScript necesaria para conseguir este efecto es .animate(), su sintaxis es la siguiente:
.animate( properties, [ duration ], [ easing ], [ callback ] )
y la función clave serÃa la siguiente:
$(document).ready(function(){
/* menu1 */
$("#menu1").mouseover(function(){
$(".bloque2").animate({"left": "440px"}, "slow");
$(".bloque3").animate({"left": "480px"}, "slow");
});
});
- En primer lugar nos auxiliamos de un gestor de eventos ( mouseover) que se ha asignado al div #menu1, que desencadena el resto de acciones
- La función clave, a la que se le pasan dos parámetros: la propiedad css de la capa que tiene asignada la clase bloque2 y el tiempo en el que se desea que se ejecute esta acción.
El resto del script, que puedes ver a continuación en la sección de código, es una variación de esta primera parte, combinándola como se desee que ocurran las transiciones en el resto de elementos del menú.
Ver Código(+/-)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://www.pcpolis.es/blog/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
/* menu1 */
$("#menu1").mouseover(function(){
$(".bloque2").animate({"left": "440px"}, "slow");
$(".bloque3").animate({"left": "480px"}, "slow");
});
/* menu2 */
$("#menu2").mouseover(function(){
$(".bloque2").animate({"left": "40px"}, "slow");
$(".bloque3").animate({"left": "480px"}, "slow");
});
/* menu3 */
$("#menu3").mouseover(function(){
$(".bloque3").animate({"left": "80px"}, "slow");
$(".bloque2").animate({"left": "40px"}, "slow");
});
});
</script>
<style>
img {
border:none;
}
#contenedor {
width:520px;
background-color: #999999;
height:250px;
overflow:hidden;
position:relative;
}
.bloque1 {
background-color:#757C08;
left:0px;
width:440px;
height:250px;
margin:0px;
top: 0px;
position:absolute;
}
.bloque2 {
background-color:#6F8C94;
left:440px;
width:440px;
height:250px;
margin:0px;
top: 0px;
position:absolute;
}
.bloque3 {
background-color:#782748;
left:480px;
width:440px;
height:250px;
margin:0px;
top: 0px;
position:absolute;
}
</style>
</head>
<body>
<div id="contenedor">
</div>
</body>