new to jquery, stuck with menu
Hi every one,
First of all, let me tell you i'm very very new to javascript and jquery so if i make a mess with the code, please understand! Also i speak in spanish so if i have a bad writing or doesn't make much sense in some phrases....thats the reason!
I'm making some kind of menu but i'm having some issues.... here i paste some html
-
<li><span>servicios</span>
<div class="subbtns">
<div>
<a href="" title=""><span>» Branding</span></a>
<a href="" title=""><span>» Imagen Institucional</span></a>
<a href="" title=""><span>» Grafica BTL</span></a>
<a href="" title=""><span>» Posicionamiento</span></a>
<a href="emarketing.html" title=""><span>» E-marketing</span></a>
<a href="" title="" name="rich"><span>» Rich Media</span></a>
<a href="" title=""><span>» Multimedia</span></a>
<a href="" title="" style="padding-bottom:0px"><span>» Campañas online</span></a>
</div>
</div>
</li>
<li><span>servicios</span>
<div class="subbtns" style="overflow-y:scroll">
<div>
<a href="" title=""><span>» Branding</span></a>
<a href="" title=""><span>» Imagen Institucional</span></a>
<a href="" title=""><span>» Grafica BTL</span></a>
<a href="" title=""><span>» Posicionamiento</span></a>
<a href="emarketing.html" title=""><span>» E-marketing</span></a>
<a href="" title="" name="rich"><span>» Rich Media</span></a>
<a href="" title=""><span>» Multimedia</span></a>
<a href="" title="" style="padding-bottom:0px"><span>» Campañas online</span></a>
</div>
</div>
</li>
<li><span>portfolio</span>
<div class="subbtns">
<div>
<a href="" title=""><span>» Institucional</span></a>
<a href="" title=""><span>» Editorial</span></a>
<a href="" title=""><span>» Digital</span></a>
</div>
</div>
</li>
<li><span>contacto</span>
<div class="subbtns">
<div>
<a href="#" title="" class="nolink"><span>» 15 6054 7342</span></a>
<a href="#" title="" class="nolink"><span>» info@ampa-d.com.ar</span></a>
<a href="" title=""><span>» Formulario</span></a>
</div>
</div>
</li>
</ul>
Here is the script
-
$(document).ready(function(){
$('body').supersleight();
// jQuery.easing.def = 'easeOutBounce';
// set opacity to nill on page load
$("div#header > a#logo > span").css("opacity","0");
// on mouse over
$("div#header > a#logo > span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, "2000");
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, "2000");
});
$("div#header > ul#menu > li > span").css("opacity","0.5");
$("div#header > ul#menu > li.liselect > span").css("opacity","0.9")
$("div#header > ul#menu > li.liselect > div > div").css("opacity","0.8");
$("div#header > ul#menu > li:not(.liselect)").hover(function () {
// doy opacidad al span
$("div#header > ul#menu > li.liselect > div").css("display","none");
$(this).children("span").stop().animate({
opacity: 0.8,
color:"verde",
backgroundColor:"azul"
}, "2000");
//muevo el contenedor de contacto
$("div#header > div#btnhc").stop().animate({
left:"820px"
}, "2000");
//doy opacidad al contenedor de los sublinks
$(this).children("div.subbtns").css("display","block");
if($("div#header > ul#menu > li > div.subbtns").css("display")== "none" ) {
$(this).children("div.subbtns").css("display","block");
$(this).children("div.subbtns").css("opacity","0");
$(this).children("div.subbtns").stop().animate({
opacity: 0.8
}, "2000");
$("div.subbtns > div").stop().animate({
opacity: 0.8,
left: "0px"
}, "2000");
}
else{$(this).children("div.subbtns").css("display","block");};
},
// on mouse out
function () {
//saco opacidad al span
$("div#header > ul#menu > li:not(.liselect)").children("span").stop().animate({
opacity: 0.5,
color:"gris",
backgroundColor:"blanco"
}, "normal", "linear");
//desaparezco el contenedor de sublinks
$(this).children("div").css("display","none");
// retraigo el contenedor de contacto
$("div#header > div#btnhc").stop().animate({
left:"558px"
}, "2000");
$("div.subbtns > div").stop().animate({
left: "-280px"
}, "2000");
});
$("div#header > ul#menu > li.liselect").hover(function () {
if($(this).children("div").css("display") == "none") {
$(this).children("div").css("display","block");
$(this).children("div").css("display","block");
$(this).children("div").css("opacity","0");
$(this).children("div").stop().animate({
opacity: 1
}, "2000");
$(this).children("div").children("div").stop().animate({
opacity: 0.8,
left: "0px"
}, "2000");
//muevo el contenedor de contacto
$("div#header > div#btnhc").stop().animate({
left:"820px"
}, "2000");
}
else{$(this).children("div").css("display","block");};
},
// on mouse out
function () {
});
});
If you notice, the first 2 'li' are the same, this is because the first one doesn't work and i duplicatet to see the result, and as you can see in the link i provide further on, the first one doesn't work, but the second does...
Thats the first issues that affects FF ie6 ie7 ie7 so its definitely my fault...
Second issue... only in ie6 and ie7... hovering over li/span, makes the li/span below moves down 3 or 4 pixels. Have no idea on this one. Both li and span have height and width fixed
Third issue only on ie9. Hovering over li : div : a doesn´t work well. Color doesn´t change when animation of container div finish. Let me explain, if you quickly move the mouse over a link in li:div before the 'slide right' ends, you'll see that css hover works. But when than short animation ends, it won't work as supposed .... strange..
you'll understund everything if you check this link
http://ampa-d.com.ar.mx95.sinspam.com/new/index3.html
there you can se all html, css and script if you like.
hope some can pointme in the right direction!!!
thanks in advance!!!