Buenas a todos, tengo un problema y espero que puedan echarme un poco de luz acá.
Estoy armando un menu que tiene un efecto de opacidad, hecho con mootools. El problema es un tanto dificil de explicar, pero es mas o menos asi:
Es un menú vertical, y cuando paso el mouse de abajo hacia arriba pasando por los diferentes items del menu, la animacion de opacidad funciona perfecto. Pero si el movimiento del mouse es de arriba hacia abajo, la animación aparece un tanto trabada, ejecutandose cuando voy por la mitad del item recién, y no se por qué pasa esto. Les dejo el código HTML, CSS y Javascript a ver si alguien sabe por qué pasa esto, y también dejo un enlace con el ejemplo del menú que estoy armando.
El segundo problema, es más una consulta. Soy novato en Javascript y mootools, y lo que quiero hacer es optimizar el código que utilizo para esta animación, ya que en estos momentos estoy utilizando una función por cada botón (pueden ver el código debajo).
Código HTML:
Ver original<link href="estilos.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="mootools-1.2.4-core-nc.js"></script> <script type="text/javascript" src="mootools-1.2-more.js"></script> <script type="text/javascript"> window.addEvent('domready', function(){
$('drop_down_menu').getElements('li.menu').each( function( elem ){
var list = elem.getElement('ul.links');
var myFx = new Fx.Slide(list).hide();
elem.addEvents({
'mouseenter' : function(){
myFx.cancel();
myFx.slideIn();
},
'mouseleave' : function(){
myFx.cancel();
myFx.slideOut();
}
});
})
});
<div id="linkbotn1"><a href="#" class="linkbotn1"><img src="images/inicio-bot-h.png" alt="" width="121" height="36" border="0" class="imgbotn1" /></a></div> <div id="linkbotn2"> <ul id="drop_down_menu"> <li class="menu"><a href="#" class="linkbotn2"><img src="images/empresa-bot-h.png" alt="" width="121" height="36" border="0" class="imgbotn2" /></a> <li><a href="#"><img src="images/quiensoy-bot-h.png" alt="" width="121" height="36" border="0" /></a></li> <li><a href="#">Link 2
</a></li> <div id="linkbotn3"><a href="#" class="linkbotn3"><img src="images/clientes-bot-h.png" alt="" width="121" height="36" border="0" class="imgbotn3" /></a></div> <div id="linkbotn4"><a href="#" class="linkbotn4"><img src="images/servicios-bot-h.png" alt="" width="121" height="36" border="0" class="imgbotn4" /></a></div> <div id="linkbotn5"><a href="#" class="linkbotn5"><img src="images/grafica-bot-h.png" alt="" width="121" height="36" border="0" class="imgbotn5" /></a></div> <div id="linkbotn6"><a href="#" class="linkbotn6"><img src="images/contacto-bot-h.png" alt="" width="121" height="36" border="0" class="imgbotn6" /></a></div> <div id="linkbotn7"><a href="#" class="linkbotn7"><img src="images/enlaces-bot-h.png" alt="" width="121" height="36" border="0" class="imgbotn7" /></a></div>
Código CSS:
Ver originalul {
margin:0;
padding:0;
}
li {
margin:0;
padding:0;
list-style-type:none;
}
li ul {
margin:0;
padding:0;
list-style-type:none;
}
#linkbotn1 {
background-image:url(images/inicio-bot.png);
background-repeat:no-repeat;
}
#linkbotn2 {
background-image:url(images/empresa-bot.png);
background-repeat:no-repeat;
}
#linkbotn3 {
background-image:url(images/clientes-bot.png);
background-repeat:no-repeat;
}
#linkbotn4 {
background-image:url(images/servicios-bot.png);
background-repeat:no-repeat;
}
#linkbotn5 {
background-image:url(images/grafica-bot.png);
background-repeat:no-repeat;
}
#linkbotn6 {
background-image:url(images/contacto-bot.png);
background-repeat:no-repeat;
}
#linkbotn7 {
background-image:url(images/enlaces-bot.png);
background-repeat:no-repeat;
}
Código Javascript
:
Ver originalwindow.addEvent('domready', function(){
$$('.imgbotn1,.imgbotn2,.imgbotn3,.imgbotn4,.imgbotn5,.imgbotn6,.imgbotn7').setStyle('opacity', 0);
$$('.linkbotn1').addEvent('mouseenter', function(){
var large = $$('.imgbotn1');
large.fade((large.get('opacity') == 1) ? 0 : 1);
});
$$('.linkbotn1').addEvent('mouseleave', function(){
var large = $$('.imgbotn1');
large.fade((large.get('opacity') == 0) ? 1 : 0);
});
$$('.linkbotn2').addEvent('mouseenter', function(){
var large = $$('.imgbotn2');
large.fade((large.get('opacity') == 1) ? 0 : 1);
});
$$('.linkbotn2').addEvent('mouseleave', function(){
var large = $$('.imgbotn2');
large.fade((large.get('opacity') == 0) ? 1 : 0);
});
$$('.linkbotn3').addEvent('mouseenter', function(){
var large = $$('.imgbotn3');
large.fade((large.get('opacity') == 1) ? 0 : 1);
});
$$('.linkbotn3').addEvent('mouseleave', function(){
var large = $$('.imgbotn3');
large.fade((large.get('opacity') == 0) ? 1 : 0);
});
$$('.linkbotn4').addEvent('mouseenter', function(){
var large = $$('.imgbotn4');
large.fade((large.get('opacity') == 1) ? 0 : 1);
});
$$('.linkbotn4').addEvent('mouseleave', function(){
var large = $$('.imgbotn4');
large.fade((large.get('opacity') == 0) ? 1 : 0);
});
$$('.linkbotn5').addEvent('mouseenter', function(){
var large = $$('.imgbotn5');
large.fade((large.get('opacity') == 1) ? 0 : 1);
});
$$('.linkbotn5').addEvent('mouseleave', function(){
var large = $$('.imgbotn5');
large.fade((large.get('opacity') == 0) ? 1 : 0);
});
$$('.linkbotn6').addEvent('mouseenter', function(){
var large = $$('.imgbotn6');
large.fade((large.get('opacity') == 1) ? 0 : 1);
});
$$('.linkbotn6').addEvent('mouseleave', function(){
var large = $$('.imgbotn6');
large.fade((large.get('opacity') == 0) ? 1 : 0);
});
$$('.linkbotn7').addEvent('mouseenter', function(){
var large = $$('.imgbotn7');
large.fade((large.get('opacity') == 1) ? 0 : 1);
});
$$('.linkbotn7').addEvent('mouseleave', function(){
var large = $$('.imgbotn7');
large.fade((large.get('opacity') == 0) ? 1 : 0);
});
});
Y aca les dejo el resultado de esto:
http://pruebas-demos.com.ar/menu/menu.html
De antemano les agradezco a todos y espero sus respuestas!