Вот
здесь анимированная менюшка, работающая во всех нормальных браузерах. В ie (у меня стоит Internet Explorer Colection и глючит во всех: 6-8) при наведении на пункт (class="panel _elem"):
- шарик(class="sharik") дергается влево, как если бы мы на мгновение отвели мышку с пункта, хотя div пункта (class="panel _elem") перекрывает шарик и находится на слое с большИм z-index. т.е. на шарик мы по идее не должны попадать.
- выпадающтй список (class="link_menu") трижды мигает, когда мы переводим курсор с пункта на его список с подпунктами. Причем замечена интересная особенность - если в классе panel_elem прописать какой-нибудь фоновый цвет для блока, например 'background-color: red;', то мигание происходит один раз
Код
$(document).ready(function()
{
// скорость шарика, можно менять (чем меньше тем быстрее)
ballspeed = 1;
$(".link_menu").hover(//на пункты в выпадающем списке
function() {
$("a",$(this)).css("color", "white");
$(this).css("border-bottom","1px solid white");},
function() {
$("a",$(this)).css("color", "#1E5FB4");
$(this).css("border-bottom","1px solid #1E5FB4");
}
);
$(".panel_elem").hover
(
function() //наведение мышкой на пункт меню
{
link=$("a", $(this)).attr("href");
$("img", $(this)).attr("src", link+"menu_img_act.jpg");
offset=$(this).offset();
left = offset.left + $(this).width()/2 - 32;
$(".menu_list", $(this).parent()).show();
$(".menu_text", $(this)).css("color","#99BDEF");
$(".sharik #baller",$(this).parent().parent().parent()).attr("src", "/bitrix/templates/hyun_main/images/menu_ball_blue.gif"); //меняю картинку шарика
$(".sharik",$(this).parent().parent().parent()).stop(); //останавливаем предыдущую анимацию если она была
b_off = $(".sharik #baller",$(this).parent().parent().parent()).offset(); //для шарика
$(".sharik",$(this).parent().parent().parent()).animate({left: left+"px"},
{duration: Math.abs(b_off.left - left)*ballspeed+100,
easing: "swing", queue: false});
$(".menu_list",$(this).parent()).css("left",left-$(".menu_list").width()/2+"px");
},
function() //отведение мышки от пункта меню
{
link=$("a", $(this)).attr("href");
$("img", $(this)).attr("src", link+"menu_img.jpg");
$(".menu_list", $(this).parent()).hide();
$(".menu_text", $(this)).css("color","#4F4F4F");
$(".sharik #baller",$(this).parent().parent().parent()).attr("src", "/bitrix/templates/hyun_main/images/menu_ball.gif"); //меняю картинку шарика
$(".sharik",$(this).parent().parent().parent()).stop(); //останавливаем предыдущую анимацию если она была
b_off = $(".sharik #baller",$(this).parent().parent().parent()).offset(); //для шарика
$(".sharik",$(this).parent().parent().parent()).animate({left: "0px"},
{duration: Math.abs(b_off.left - 0)*ballspeed+100, easing: "swing", queue: false});
}
);
$(".menu_list").hover//над выпадающим списком
(
function() //наведение мышкой на пункт меню
{
link=$(".panel_elem a", $(this).parent()).attr("href");
$(".panel_elem img", $(this).parent()).attr("src", link+"menu_img_act.jpg");
offset=$(".panel_elem",$(this).parent()).offset();
left = offset.left + $(".panel_elem",$(this).parent()).width()/2 - 32;
$(this).show();
$(".panel_elem .menu_text", $(this).parent()).css("color","#99BDEF");
$(".sharik #baller",$(this).parent().parent().parent()).attr("src", "/bitrix/templates/hyun_main/images/menu_ball_blue.gif"); //меняю картинку шарика
$(".sharik",$(this).parent().parent().parent()).stop(); //останавливаем предыдущую анимацию если она была
b_off = $(".sharik #baller",$(this).parent().parent().parent()).offset(); //для шарика
$(".sharik",$(this).parent().parent().parent()).animate({left: left+"px"},
{duration: Math.abs(b_off.left - left)*ballspeed+100,
easing: "swing", queue: false});
$(this).css("left",left-$(this).width()/2+"px");
},
function() //отведение мышки от пункта меню
{ link=$(".panel_elem a", $(this).parent()).attr("href");
$(".panel_elem img", $(this).parent()).attr("src", link+"menu_img.jpg");
$(this).hide();
$(".panel_elem .menu_text", $(this).parent()).css("color","#4F4F4F");
$(".sharik #baller",$(this).parent().parent().parent()).attr("src", "/bitrix/templates/hyun_main/images/menu_ball.gif"); //меняю картинку шарика
$(".sharik",$(this).parent().parent().parent()).stop(); //останавливаем предыдущую анимацию если она была
b_off = $(".sharik #baller",$(this).parent().parent().parent()).offset(); //для шарика
$(".sharik",$(this).parent().parent().parent()).animate({left: "0px"},
{duration: Math.abs(b_off.left - 0)*ballspeed+100, easing: "swing", queue: false});
}
);
$(".horizontal_level").hover //над одним из трех разделов верхнего уровня
(
function() //наведение мышкой на меню
{
link=$("div.flt > a.link", $(this)).attr("href");
$(this).css("background","url(/bitrix/components/propodhod/menu/templates/main_menu_hy/images/horiz_level_back_act.gif) left bottom repeat-x");
$("div.flt a.link img.parent_img", $(this)).attr("src", link+"menu_img_act.jpg");
$(".sharik #baller",$(this)).attr("src", "/bitrix/templates/hyun_main/images/menu_ball_blue.gif");
},
function() //отведение мышки от меню
{
link=$("div.flt > a.link", $(this)).attr("href");
$(this).css("background","url(/bitrix/components/propodhod/menu/templates/main_menu_hy/images/horiz_level_back.gif) left bottom repeat-x");
$("div.flt a.link img.parent_img", $(this)).attr("src", link+"menu_img.jpg");
$(".sharik #baller",$(this)).attr("src", "/bitrix/templates/hyun_main/images/menu_ball.gif");
}
);
});
Поделитесь, пожалуйста, соображениями по поводу такого необычного поведения ишака...
