Estou desenvolvendo um menu, mas é preciso que ele funcione pelo menos no ie 7, mas como não sou um expert em javascript, estou com dificuldades para identificar os erros.
Atualmente funciona no GC, FF e Safari(os que eu teste), mas não funciona no IE 8 nem 7.
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#menu{
position: absolute;
left: 50%;
top: 20px;
margin-left: -400px;
background: #F4F4F4;
}
ul{
list-style: none;
width: 800px;
position: absolute;
z-index: 999;
}
ul li{
display: inline;
padding: 5px 20px;
}
#hover{
background: red;
position: absolute;
z-index: 888;
padding: 5px 20px;
}
ul li a{}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var tempo = 15;
var tempo_left = 60;
var active_left = $('#menu ul li.active').offset().left;
var active_width = $('#menu ul li.active').width();
$('#hover').css({
width : $('#menu ul li.active').width(),
height : $('#menu ul li.active').height(),
left : active_left-$('#menu ul').offset().left
});
$('#menu ul li').mouseover(function(){
menu_item_width = $(this).width();
menu_item_left = $(this).offset().left;
});
$('#menu ul li').mouseout(function(){
menu_item_width = active_width;
menu_item_left = active_left;
});
function echo(txt){
$('#div').html($('#div').html()+'<p>'+txt+'</p>');
}
window.setInterval(function(){
if($('#hover').width() >= menu_item_width){
var qtd_width = ($('#hover').width()-menu_item_width)/tempo;
}else{
var qtd_width = (menu_item_width-$('#hover').width())/tempo;
}
if(menu_item_width >= (parseInt($('#hover').width())+parseInt(qtd_width))){
$('#hover').width(parseInt($('#hover').width())+parseInt(qtd_width));
}else if(menu_item_width <= $('#hover').width()-(qtd_width)){
$('#hover').width($('#hover').width()-(qtd_width));
}
var b = menu_item_left-$('#menu ul').offset().left;
var a = $('#hover').offset().left-$('#menu ul').offset().left;
var t = tempo_left
if(a >= b){
var x = a-b;
}else{
var x = b-a;
//alert(x);
}
var ps = x/t;
if($('#hover').offset().left-ps-10 >= menu_item_left){
$('#hover').css('left', $('#hover').offset().left-$('#menu ul').offset().left-ps-10);
}else if($('#hover').offset().left+parseInt(ps)+parseInt(10) <= menu_item_left){
$('#hover').css('left', $('#hover').offset().left-$('#menu ul').offset().left+parseInt(ps)+parseInt(10));
}
}, 1);
});
</script>
</head>
<body>
<div id="menu">
<div id="hover"></div>
<ul>
<li><a href="">MENU 1</a></li>
<li class="active"><a href="">MEfdfdsfsdf sd sdfs dfaNU 2</a></li>
<li><a href="">MEdddU 3</a></li>
<li><a href="">MEfdsfsdfNU 4</a></li>
<li><a href="">MENfasf sadfU 5</a></li>
</ul>
</div>
<div id="div"></div>
</body>
</html>
O efeito final será parecido com o do site VFXproduções
Question
vini_loock
Olá.
Estou desenvolvendo um menu, mas é preciso que ele funcione pelo menos no ie 7, mas como não sou um expert em javascript, estou com dificuldades para identificar os erros.
Atualmente funciona no GC, FF e Safari(os que eu teste), mas não funciona no IE 8 nem 7.
<html> <head> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #menu{ position: absolute; left: 50%; top: 20px; margin-left: -400px; background: #F4F4F4; } ul{ list-style: none; width: 800px; position: absolute; z-index: 999; } ul li{ display: inline; padding: 5px 20px; } #hover{ background: red; position: absolute; z-index: 888; padding: 5px 20px; } ul li a{} </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var tempo = 15; var tempo_left = 60; var active_left = $('#menu ul li.active').offset().left; var active_width = $('#menu ul li.active').width(); $('#hover').css({ width : $('#menu ul li.active').width(), height : $('#menu ul li.active').height(), left : active_left-$('#menu ul').offset().left }); $('#menu ul li').mouseover(function(){ menu_item_width = $(this).width(); menu_item_left = $(this).offset().left; }); $('#menu ul li').mouseout(function(){ menu_item_width = active_width; menu_item_left = active_left; }); function echo(txt){ $('#div').html($('#div').html()+'<p>'+txt+'</p>'); } window.setInterval(function(){ if($('#hover').width() >= menu_item_width){ var qtd_width = ($('#hover').width()-menu_item_width)/tempo; }else{ var qtd_width = (menu_item_width-$('#hover').width())/tempo; } if(menu_item_width >= (parseInt($('#hover').width())+parseInt(qtd_width))){ $('#hover').width(parseInt($('#hover').width())+parseInt(qtd_width)); }else if(menu_item_width <= $('#hover').width()-(qtd_width)){ $('#hover').width($('#hover').width()-(qtd_width)); } var b = menu_item_left-$('#menu ul').offset().left; var a = $('#hover').offset().left-$('#menu ul').offset().left; var t = tempo_left if(a >= b){ var x = a-b; }else{ var x = b-a; //alert(x); } var ps = x/t; if($('#hover').offset().left-ps-10 >= menu_item_left){ $('#hover').css('left', $('#hover').offset().left-$('#menu ul').offset().left-ps-10); }else if($('#hover').offset().left+parseInt(ps)+parseInt(10) <= menu_item_left){ $('#hover').css('left', $('#hover').offset().left-$('#menu ul').offset().left+parseInt(ps)+parseInt(10)); } }, 1); }); </script> </head> <body> <div id="menu"> <div id="hover"></div> <ul> <li><a href="">MENU 1</a></li> <li class="active"><a href="">MEfdfdsfsdf sd sdfs dfaNU 2</a></li> <li><a href="">MEdddU 3</a></li> <li><a href="">MEfdsfsdfNU 4</a></li> <li><a href="">MENfasf sadfU 5</a></li> </ul> </div> <div id="div"></div> </body> </html>O efeito final será parecido com o do site VFXproduções
Link to comment
Share on other sites
0 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.